compelem 0.20.0-b2 → 0.20.0

package/index.js

@@ -1,33 +1,10 @@
 /**
-   * compelem v0.20.0-b2.1772633551
+   * compelem v0.20.0.1773502279
    * A modern, reactive, fast, lightweight and flexible lib for building web components
    * @holyhigh2
    * git+https://github.com/holyhigh2/compelem.git
    */
-  import myfx, { concat, toPath, some, isString, isUndefined, isBlank, closest, defaults, isLowerCaseChar, merge, each, kebabCase, has, toArray, set, get, includes, find, debounce, throttle, once, remove, map, size, isSymbol, isFunction, isArray, isObject, eachRight, slice, flatMap, test, assign, first, walkTree, isEmpty, filter, camelCase, isNull, startsWith, isNil, bind as bind$1, isDefined, trim, isBoolean, parseJSON, cloneDeep, keys, groupBy, last, reject, toString, reduce, compact, initial, except, join, split, isEqual, replace, replaceAll, snakeCase, isMatch, clone, findIndex, call } from 'myfx';
-
-/**
- * 样式模板
- * @author holyhigh2
- */
-class CssTemplate {
-    strings;
-    vars;
-    constructor(strings, vars) {
-        this.strings = concat(strings);
-        this.vars = vars;
-    }
-    getCss(comp) {
-        let str = '';
-        this.strings.forEach((s, i) => {
-            str = str + s + (this.vars[i] ?? '');
-        });
-        return str;
-    }
-    destroy() {
-        this.strings = this.vars = null;
-    }
-}
+  import myfx, { toPath, some, isString, isUndefined, isBlank, closest, isObject, isFunction, startsWith, get, concat, toArray, isSymbol, isArray, size, eachRight, slice, defaults, isLowerCaseChar, merge, each, kebabCase, has, set, includes, find, debounce, throttle, once, remove, map, flatMap, test, assign, first, walkTree, isEmpty, filter, isNil, camelCase, isNull, isDefined, trim, isBoolean, parseJSON, cloneDeep, keys, groupBy, last, reject, toString, reduce, compact, initial, except, join, split, isEqual, replace, replaceAll, snakeCase, bind as bind$1, isMatch, clone, findIndex, call } from 'myfx';
 
 const SLOT_NAME_DEFAULT = 'default';
 /**
@@ -47,14 +24,26 @@ var Mode;
 })(Mode || (Mode = {}));
 const DefinitionCompEventMap = new Map();
 const DefinitionTagMap = {};
-const DefinitionWatchMap = new Map();
-const DefinitionComputedMap = new Map();
-const DefinitionStateMap = new Map();
-const DefinitionPropMap = new Map();
+const DefinitionComputedMap = new WeakMap();
+const DefinitionStateMap = new WeakMap();
+const DefinitionPropMap = new WeakMap();
 const DefinitionDecoratorMap = new Map();
 const ObservedAttrsMap = new Map();
+const WatchKeysOnceMap = new WeakMap();
+const WatchKeysDeepListMap = new WeakMap();
+const WatchKeysListMap = new WeakMap();
+const WatchUpdateMap = new WeakMap();
+const WatchDeepUpdateMap = new WeakMap();
+const WatchImmediateListMap = new WeakMap();
+const PropSyncKeySetMap = new WeakMap();
+const StateShallowKeySetMap = new WeakMap();
+const HasChangedPropOrStateMap = new WeakMap();
+const ComputedUpdateDepsMap = new WeakMap();
+const CssUpdateDepsMap = new WeakMap();
 const ComponentDynamicCssUpdaterMap = new WeakMap();
 const PATH_SEPARATOR = '-';
+const PROP_NAME_SLOTS$1 = 'slots';
+const DATA_KEY = '__data_';
 
 function showError(msg) {
     console.error(`[CompElem]`, msg);
@@ -146,6 +135,303 @@ function getSlotComponent(node, renderComponent) {
     return documentFragment ? documentFragment.host : undefined;
 }
 
+/**
+ * 用于提供全局state状态管理
+ * @author holyhigh2
+ */
+function getterValue(getter, propertyKey, context) {
+    let thisHost = context;
+    let v = getter ? getter.call(thisHost) : Reflect.get(thisHost[DATA_KEY], propertyKey);
+    if (Collector.__collecting) {
+        Collector.__varPathList.push(propertyKey);
+    }
+    if (PROXY_MAP.has(v)) {
+        let contextList = EXTRA_CONTEXT_OF_VAR.get(v);
+        if (!contextList) {
+            contextList = new Set();
+            EXTRA_CONTEXT_OF_VAR.set(v, contextList);
+        }
+        contextList.add(thisHost.__thisRef);
+        return PROXY_MAP.get(v);
+    }
+    if (isObject(v) && !isFunction(v) && !(v instanceof Node) && !Object.isFrozen(v)) {
+        let keySet = StateShallowKeySetMap.get(thisHost.constructor);
+        let shallow = keySet?.has(propertyKey);
+        v = shallow || propertyKey === PROP_NAME_SLOTS$1 ? v : reactive(v, thisHost, propertyKey);
+    }
+    return v;
+}
+function setterValue(propertyKey, v, context) {
+    let thisHost = context;
+    if (!thisHost.__inited) {
+        Reflect.set(thisHost[DATA_KEY], propertyKey, v);
+        return;
+    }
+    let oldValue = thisHost[DATA_KEY][propertyKey];
+    let stateMap = HasChangedPropOrStateMap.get(thisHost.constructor);
+    let hasChanged = stateMap?.get(propertyKey);
+    if (hasChanged) {
+        if (!hasChanged.call(thisHost, v, oldValue, [propertyKey], v, oldValue))
+            return true;
+    }
+    else {
+        //默认对比算法
+        if (Object.is(oldValue, v)) {
+            return true;
+        }
+    }
+    //check watch
+    requestWatchUpdate(thisHost, v, oldValue, propertyKey);
+    //check computed
+    requestComputedUpdate(thisHost, propertyKey);
+    //check css
+    requestCssUpdate(thisHost, propertyKey);
+    Reflect.set(thisHost[DATA_KEY], propertyKey, v);
+    thisHost._notify(oldValue, [propertyKey]);
+    //update sync
+    let syncKeySet = PropSyncKeySetMap.get(thisHost.constructor);
+    if (syncKeySet?.has(propertyKey)) {
+        thisHost.emit('update' + ":" + propertyKey, { value: v });
+    }
+}
+function requestWatchUpdate(context, newValue, oldValue, fullPath, rootObjNew, rootObjOld) {
+    let superComp = _getSuper(context.constructor);
+    let watchKeys = WatchKeysListMap.get(context.constructor) ?? WatchKeysListMap.get(superComp);
+    let watchKeysDeep = WatchKeysDeepListMap.get(context.constructor) ?? WatchKeysDeepListMap.get(superComp);
+    let watchDeepUpdateMap = WatchDeepUpdateMap.get(context.constructor) ?? WatchDeepUpdateMap.get(superComp);
+    let watchUpdateMap = WatchUpdateMap.get(context.constructor) ?? WatchUpdateMap.get(superComp);
+    let onceMap = WatchKeysOnceMap.get(context.constructor) ?? WatchKeysOnceMap.get(superComp);
+    watchKeys?.forEach(wk => {
+        if (fullPath === wk ||
+            (startsWith(wk, fullPath + '.') && !Object.is(get(context._getPrivateData(), wk), get(newValue, wk))) ||
+            (startsWith(fullPath, wk + '.') && watchKeysDeep?.includes(wk) && !Object.is(get(context._getPrivateData(), wk), get(newValue, wk)))) {
+            concat(toArray(watchUpdateMap[wk]), toArray(watchDeepUpdateMap[wk])).forEach(fn => {
+                if (!fn)
+                    return;
+                if (onceMap.get(wk) === true)
+                    return;
+                context._watchUpdateArgsInNextTick.set(fn, {
+                    newValue, oldValue, chain: fullPath.split('.'), rootObjNew, rootObjOld, fullMatch: wk === fullPath
+                });
+                context._watchUpdateSetInNextTick.add(fn);
+                if (onceMap.has(wk))
+                    onceMap.set(wk, true);
+            });
+        }
+    });
+}
+function requestComputedUpdate(context, fullPath) {
+    let depMap = ComputedUpdateDepsMap.get(context.constructor);
+    if (depMap?.has(fullPath)) {
+        depMap.get(fullPath)?.forEach(fn => {
+            context._computedUpdateSetInNextTick.add(fn);
+        });
+    }
+}
+function requestCssUpdate(context, fullPath) {
+    let deps = CssUpdateDepsMap.get(context.constructor);
+    if (!deps)
+        return;
+    let pathChain = fullPath.split('.');
+    let path = '';
+    pathChain.forEach(p => {
+        path = path ? path + '.' + p : p;
+        if (deps.has(path)) {
+            context._cssUpdateInNextTick = true;
+        }
+    });
+}
+const Collector = {
+    popDirectiveQ() {
+        let rs = this.__varPathList.reduceRight((acc, p) => {
+            if (!acc.includes(p)) {
+                acc.unshift(p);
+            }
+            return acc;
+        }, []);
+        return rs;
+    },
+    start() {
+        this.__collecting = true;
+        this.__varPathList = [];
+    },
+    end(renderComponent, up) {
+        if (renderComponent && up) {
+            renderComponent._regSubViewDeps(Collector.popVarPathList(), up);
+        }
+        this.__collecting = false;
+    },
+    popVarPathList() {
+        let rs = Array.from(new Set(this.__varPathList));
+        this.__varPathList = [];
+        return rs;
+    },
+    __varPathList: [],
+    __collecting: false,
+};
+//对象值在不同上下文的根路径
+const OBJECT_VAR_ROOT_PATH_IN_CONTEXT = new WeakMap();
+const OBJECT_VAR_PATH = new WeakMap();
+//缓存已经创建的proxy对象
+const PROXY_MAP = new WeakMap();
+//对象值的创建上下文
+const OBJECT_VAR_ROOT_CONTEXT = new WeakMap();
+//上级对象所在的扩展context
+const EXTRA_CONTEXT_OF_VAR = new WeakMap();
+function reactive(obj, context, rootProp) {
+    if (PROXY_MAP.has(obj))
+        return PROXY_MAP.get(obj);
+    if (OBJECT_VAR_ROOT_CONTEXT.has(obj)) {
+        if (rootProp) {
+            let pathMap = OBJECT_VAR_ROOT_PATH_IN_CONTEXT.get(context);
+            if (!pathMap) {
+                pathMap = new WeakMap();
+                OBJECT_VAR_ROOT_PATH_IN_CONTEXT.set(context, pathMap);
+            }
+            pathMap.set(obj, rootProp);
+            let contextList = EXTRA_CONTEXT_OF_VAR.get(obj);
+            if (!contextList) {
+                contextList = new Set();
+                EXTRA_CONTEXT_OF_VAR.set(obj, contextList);
+            }
+            if (!contextList.values().some(v => v.deref() === context)) {
+                contextList.add(new WeakRef(context));
+            }
+        }
+        return obj;
+    }
+    const proxyObject = new Proxy(obj, {
+        get(target, prop, receiver) {
+            if (!prop)
+                return undefined;
+            const value = Reflect.get(target, prop, receiver);
+            if (isSymbol(prop))
+                return value;
+            if (isFunction(value))
+                return value;
+            if (prop === 'length' && isArray(target))
+                return value;
+            if (Collector.__collecting) {
+                let supPath = OBJECT_VAR_PATH.has(receiver) ? concat(OBJECT_VAR_PATH.get(receiver)) : [];
+                supPath.push(prop);
+                let propPath = supPath.join('.');
+                Collector.__varPathList.push(propPath);
+            }
+            if (PROXY_MAP.has(value))
+                return PROXY_MAP.get(value);
+            let reactiveVal = value;
+            if (isObject(value) && !isFunction(value) && !(value instanceof Node) && !Object.isFrozen(value)) {
+                reactiveVal = reactive(value, context);
+                let supPath = OBJECT_VAR_PATH.has(receiver) ? concat(OBJECT_VAR_PATH.get(receiver)) : [];
+                supPath.push(prop);
+                OBJECT_VAR_PATH.set(reactiveVal, supPath);
+                PROXY_MAP.set(value, reactiveVal);
+            }
+            return reactiveVal;
+        },
+        set(target, prop, newValue, receiver) {
+            if (!prop)
+                return false;
+            let ov = target[prop];
+            let chain = OBJECT_VAR_PATH.get(receiver) ?? [];
+            let subChain = concat(chain, [prop]);
+            let stateMap = HasChangedPropOrStateMap.get(context.constructor);
+            let hasChanged = stateMap?.get(subChain[0]);
+            let moreThan1 = subChain.length > 1;
+            let rootObjNew = newValue;
+            let rootObjOld = ov;
+            if (moreThan1) {
+                rootObjOld = rootObjNew = context._getPrivateData()[subChain[0]];
+            }
+            if (hasChanged) {
+                if (!hasChanged.call(context, rootObjNew, rootObjOld, subChain, newValue, ov))
+                    return true;
+            }
+            else {
+                //默认对比算法
+                if (Object.is(ov, newValue)) {
+                    return true;
+                }
+            }
+            let nv = newValue;
+            let rs = Reflect.set(target, prop, nv);
+            let extraContext = EXTRA_CONTEXT_OF_VAR.get(receiver);
+            let k = subChain.join('.');
+            //check watch
+            requestWatchUpdate(context, nv, ov, k, rootObjNew, rootObjOld);
+            //check computed
+            requestComputedUpdate(context, k);
+            //check css
+            requestCssUpdate(context, k);
+            notifyUpdate(context, rootObjOld, subChain);
+            extraContext?.forEach(ctxRef => {
+                let ctx = ctxRef.deref();
+                if (!ctx)
+                    return;
+                let ctxRootPath = ctx._wrapperProp[subChain[0]];
+                let ck = subChain.join('.');
+                ck = ck.replace(subChain[0], ctxRootPath);
+                //check watch
+                requestWatchUpdate(ctx, nv, ov, ck);
+                //check computed
+                requestComputedUpdate(ctx, ck);
+                //check css
+                requestCssUpdate(ctx, ck);
+                notifyUpdate(ctx, rootObjOld, ck.split('.'));
+            });
+            return rs;
+        }
+    });
+    if (!OBJECT_VAR_PATH.has(proxyObject)) {
+        OBJECT_VAR_PATH.set(proxyObject, rootProp ? [rootProp] : []);
+    }
+    PROXY_MAP.set(obj, proxyObject);
+    if (rootProp) {
+        OBJECT_VAR_ROOT_CONTEXT.set(proxyObject, context);
+        if (!OBJECT_VAR_ROOT_PATH_IN_CONTEXT.has(context)) {
+            let pathMap = new WeakMap();
+            pathMap.set(proxyObject, rootProp);
+            OBJECT_VAR_ROOT_PATH_IN_CONTEXT.set(context, pathMap);
+        }
+    }
+    return proxyObject;
+}
+function notifyUpdate(context, oldValue, path, subNewValue, subOldValue) {
+    let i = size(path);
+    eachRight(path, (p) => {
+        let varPath = slice(path, 0, i--);
+        context._notify(oldValue, varPath);
+    });
+}
+const QMap = new Map();
+class Queue {
+    static nextSet = new Set();
+    static nextPending = false;
+    static next;
+    static flush() {
+        Queue.nextPending = false;
+        let nq = Array.from(Queue.nextSet);
+        Queue.nextSet.clear();
+        QMap.clear();
+        nq.forEach(u => u());
+        nq = null;
+    }
+    static pushNext(updater) {
+        Queue.nextSet.add(updater);
+        if (!Queue.nextPending) {
+            Queue.nextPending = true;
+            Queue.next();
+        }
+    }
+}
+(() => {
+    const p = Promise.resolve();
+    const nextFn = Queue.flush;
+    Queue.next = () => {
+        p.then(nextFn);
+    };
+})();
+
 function prop(options) {
     if (arguments.length === 1) {
         return (target, propertyKey, descriptor) => {
@@ -167,11 +453,11 @@ function defineProp(target, propertyKey, options, descriptor) {
         showError(`Prop '${propertyKey}' must be in CamelCase`);
     }
     let attrSet;
-    if (!DefinitionPropMap.has(target.constructor.name)) {
+    if (!DefinitionPropMap.has(target.constructor)) {
         const mixinProps = {};
         let parentCtor = target.constructor;
         while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-            merge(mixinProps, DefinitionPropMap.get(parentCtor.name) ?? {});
+            merge(mixinProps, DefinitionPropMap.get(parentCtor) ?? {});
         }
         attrSet = new Set();
         each(mixinProps, (v, k) => {
@@ -180,8 +466,8 @@ function defineProp(target, propertyKey, options, descriptor) {
                 attrSet?.add(kbb);
             }
         });
-        ObservedAttrsMap.set(target.constructor.name, attrSet);
-        DefinitionPropMap.set(target.constructor.name, mixinProps);
+        ObservedAttrsMap.set(target.constructor, attrSet);
+        DefinitionPropMap.set(target.constructor, mixinProps);
     }
     if (descriptor) {
         if (descriptor.get)
@@ -191,7 +477,7 @@ function defineProp(target, propertyKey, options, descriptor) {
     }
     if (options.attribute) {
         if (!attrSet) {
-            attrSet = ObservedAttrsMap.get(target.constructor.name);
+            attrSet = ObservedAttrsMap.get(target.constructor);
         }
         let kbb = kebabCase(propertyKey);
         attrSet?.add(kbb);
@@ -202,12 +488,43 @@ function defineProp(target, propertyKey, options, descriptor) {
     }
     if (attrSet)
         target.constructor.observedAttributes = toArray(attrSet);
-    set(DefinitionPropMap.get(target.constructor.name), propertyKey, options);
+    set(DefinitionPropMap.get(target.constructor), propertyKey, options);
+    //cache tags
+    if (options.hasChanged) {
+        let changeMap = HasChangedPropOrStateMap.get(target.constructor);
+        if (!changeMap) {
+            changeMap = new Map();
+            HasChangedPropOrStateMap.set(target.constructor, changeMap);
+        }
+        changeMap.set(propertyKey, options.hasChanged);
+    }
+    if (options.sync) {
+        let keySet = PropSyncKeySetMap.get(target.constructor);
+        if (!keySet) {
+            keySet = new Set();
+            PropSyncKeySetMap.set(target.constructor, keySet);
+        }
+        keySet.add(propertyKey);
+    }
+    //setters & getters
+    Reflect.defineProperty(target, propertyKey, {
+        get() {
+            return getterValue(descriptor?.get, propertyKey, this);
+        },
+        set(v) {
+            if (descriptor?.set) {
+                descriptor.set(v);
+            }
+            else {
+                setterValue(propertyKey, v, this);
+            }
+        },
+    });
 }
 //内部接口
 const emptySet = new Set;
 function _getObservedAttrs(ctor) {
-    return ObservedAttrsMap.get(ctor.name) ?? emptySet;
+    return ObservedAttrsMap.get(ctor) ?? emptySet;
 }
 
 /*************************************************************
@@ -225,6 +542,7 @@ const AllResizeEls = new WeakMap;
 const AllOutsideDownEls = [];
 const AllOutsideClickEls = [];
 const AllOutsideDblClickEls = [];
+const ResizeTargetInitSet = new WeakSet();
 const resizeObserver = new ResizeObserver((entries) => {
     for (const entry of entries) {
         const contentBoxSize = Array.isArray(entry.contentBoxSize)
@@ -233,17 +551,13 @@ const resizeObserver = new ResizeObserver((entries) => {
         const borderBoxSize = Array.isArray(entry.borderBoxSize)
             ? entry.borderBoxSize[0]
             : entry.borderBoxSize;
+        if (!ResizeTargetInitSet.has(entry.target)) {
+            ResizeTargetInitSet.add(entry.target);
+            continue;
+        }
         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);
+            cbk({ target: entry.target, contentBoxSize, borderBoxSize, type: 'resize' });
         }
     }
 });
@@ -305,12 +619,8 @@ const mutationObserver = new MutationObserver(mutations => {
                 break;
         }
         if (cbk) {
-            let ev = new CustomEvent('mutate', {
-                bubbles: false,
-                cancelable: false,
-                detail
-            });
-            cbk(ev);
+            detail.type = 'mutate';
+            cbk(detail);
         }
     }
 });
@@ -355,15 +665,7 @@ document.addEventListener('mousedown', e => {
     let t = get(e.composedPath(), 0, e.target);
     AllOutsideDownEls.forEach(([node, cbk]) => {
         if (!node.contains(t) && !node.contains(closest(t, (node) => node instanceof ShadowRoot, 'parentNode')?.host)) {
-            let ev = new CustomEvent('outside', {
-                bubbles: false,
-                cancelable: false,
-                detail: {
-                    currentTarget: node,
-                    event: e
-                },
-            });
-            cbk(ev, node);
+            cbk({ type: 'outside', target: node, modifier: 'mousedown', event: e });
         }
     });
 }, false);
@@ -371,15 +673,7 @@ document.addEventListener('click', e => {
     let t = get(e.composedPath(), 0, e.target);
     AllOutsideClickEls.forEach(([node, cbk]) => {
         if (!node.contains(t) && !node.contains(closest(t, (node) => node instanceof ShadowRoot, 'parentNode')?.host)) {
-            let ev = new CustomEvent('outside', {
-                bubbles: false,
-                cancelable: false,
-                detail: {
-                    currentTarget: node,
-                    event: e
-                },
-            });
-            cbk(ev, node);
+            cbk({ type: 'outside', target: node, modifier: 'click', event: e });
         }
     });
 }, false);
@@ -387,15 +681,7 @@ document.addEventListener('dblclick', e => {
     let t = get(e.composedPath(), 0, e.target);
     AllOutsideDblClickEls.forEach(([node, cbk]) => {
         if (!node.contains(t) && !node.contains(closest(t, (node) => node instanceof ShadowRoot, 'parentNode')?.host)) {
-            let ev = new CustomEvent('outside', {
-                bubbles: false,
-                cancelable: false,
-                detail: {
-                    currentTarget: node,
-                    event: e
-                },
-            });
-            cbk(ev, node);
+            cbk({ type: 'outside', target: node, modifier: 'dblclick', event: e });
         }
     });
 }, false);
@@ -416,311 +702,130 @@ function addOutsideClick(node, cbk, component) {
 function addOutsideDblClick(node, cbk, component) {
     AllOutsideDblClickEls.push([node, cbk]);
     //record
-    return (remove = false) => {
-        myfx.remove(AllOutsideDblClickEls, el => el[0] === node && el[1] === cbk);
-    };
-}
-function isExtEvent(evName) {
-    return ExtEvNames.includes(evName);
-}
-function addExtEvent(evName, node, cbk, parts, component) {
-    if (evName === 'resize') {
-        return addResize(node, cbk);
-    }
-    else if (evName === 'outside') {
-        switch (parts[0]) {
-            case 'mousedown':
-                return addOutsideMouseDown(node, cbk);
-            case 'dblclick':
-                return addOutsideDblClick(node, cbk);
-            case 'click':
-            default:
-                return addOutsideClick(node, cbk);
-        }
-    }
-    else if (evName === 'mutate') {
-        return addMutation(node, cbk, parts);
-    }
-}
-
-const MODI_EV_DEBOUNCE = /,|^(debounce:.+)|(debounce$)/;
-const MODI_EV_THROTTLE = /,|^(throttle:.+)|(throttle$)/;
-const MODI_EV_SELF = 'self';
-const MODI_EV_STOP = 'stop';
-const MODI_EV_PREVENT = 'prevent';
-const MODI_EV_ONCE = 'once';
-const MODI_EV_CAPTURE = 'capture';
-const MODI_EV_PASSIVE = 'passive';
-const MODI_EV_MOUSE_LEFT = 'left';
-const MODI_EV_MOUSE_RIGHT = 'right';
-const MODI_EV_MOUSE_MIDDLE = 'middle';
-const MODI_EV_KEYBOARD_COMBO_CTRL = 'ctrl';
-const MODI_EV_KEYBOARD_COMBO_ALT = 'alt';
-const MODI_EV_KEYBOARD_COMBO_SHIFT = 'shift';
-const MODI_EV_KEYBOARD_COMBO_META = 'meta';
-const MODI_EV_KEYBOARD_KEY_MAP = {
-    'esc': 'escape'
-};
-const MODI_PARAM_DIVIDER = ":";
-/*************************************************************
- * 事件修饰符
- * @author holyhigh2
- *
- * 全部通用 debounce/once/throttle/capture/passive 可组合
- * 原生通用 stop/prevent/self 可组合
- * 鼠标 left/right/middle 不可组合
- * 键盘 ctrl/alt/shift/meta 可组合 esc/letters... 不可组合,多个key并列式表示可选
- *
- * 部分修饰符支持参数，使用冒号传参如：throttle:100 / debounce:100
- *************************************************************/
-const VFN = () => { };
-function addEvent(fullName, cbk, node, component) {
-    let parts = fullName.split('.');
-    let evName = parts.shift();
-    let isOnce = parts.includes(MODI_EV_ONCE);
-    let c = cbk ?? VFN;
-    let modi;
-    if (modi = find(parts, x => MODI_EV_DEBOUNCE.test(x))) {
-        let params = modi.split(MODI_PARAM_DIVIDER);
-        c = debounce(c, parseInt(params[1]) || 100);
-    }
-    if (modi = find(parts, x => MODI_EV_THROTTLE.test(x))) {
-        let params = modi.split(MODI_PARAM_DIVIDER);
-        c = throttle(c, parseInt(params[1]) || 100);
-    }
-    if (isOnce) {
-        c = once(c);
-    }
-    if (isExtEvent(evName)) {
-        return addExtEvent(evName, node, c, parts);
-    }
-    let listener = (e) => {
-        if (parts.includes(MODI_EV_PREVENT))
-            e.preventDefault();
-        if (parts.includes(MODI_EV_STOP))
-            e.stopPropagation();
-        if (parts.includes(MODI_EV_SELF) && e.target !== e.currentTarget)
-            return;
-        if (e instanceof MouseEvent) {
-            if (parts.includes(MODI_EV_MOUSE_LEFT) && e.button != 0)
-                return;
-            if (parts.includes(MODI_EV_MOUSE_RIGHT) && e.button != 2)
-                return;
-            if (parts.includes(MODI_EV_MOUSE_MIDDLE) && e.button != 1)
-                return;
-        }
-        else if (e instanceof KeyboardEvent) {
-            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_CTRL)[0] && !e.ctrlKey)
-                return;
-            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_ALT)[0] && !e.altKey)
-                return;
-            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_SHIFT)[0] && !e.shiftKey)
-                return;
-            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_META)[0] && !e.metaKey)
-                return;
-            let checkKeys = map(parts, k => MODI_EV_KEYBOARD_KEY_MAP[k] || k);
-            if (size(checkKeys) > 0 && !checkKeys.includes(e.key.toLowerCase()))
-                return;
-        }
-        console.debug(evName, c.name, node.tagName);
-        c(e);
-    };
-    let capture = parts.includes(MODI_EV_CAPTURE) || false;
-    let passive = parts.includes(MODI_EV_PASSIVE) || false;
-    let options = { capture, passive };
-    node.addEventListener(evName, listener, options);
-    //record
-    return (remove = false) => {
-        node.removeEventListener(evName, listener, options);
-        if (remove)
-            node = null;
-    };
-}
-
-/**
- * 用于提供全局state状态管理
- * @author holyhigh2
- */
-const Collector = {
-    popDirectiveQ() {
-        let rs = this.__varPathList.reduceRight((acc, p) => {
-            if (!acc.includes(p)) {
-                acc.unshift(p);
-            }
-            return acc;
-        }, []);
-        return rs;
-    },
-    start() {
-        this.__collecting = true;
-        this.__varPathList = [];
-    },
-    end(renderComponent, up) {
-        if (renderComponent && up) {
-            renderComponent._regSubViewDeps(Collector.popVarPathList(), up);
-        }
-        this.__collecting = false;
-    },
-    popVarPathList() {
-        let rs = Array.from(new Set(this.__varPathList));
-        this.__varPathList = [];
-        return rs;
-    },
-    __varPathList: [],
-    __collecting: false,
-};
-//对象值在不同上下文的根路径
-const OBJECT_VAR_ROOT_PATH_IN_CONTEXT = new WeakMap();
-const OBJECT_VAR_PATH = new WeakMap();
-//缓存已经创建的proxy对象
-const PROXY_MAP = new WeakMap();
-//对象值的创建上下文
-const OBJECT_VAR_ROOT_CONTEXT = new WeakMap();
-//上级对象所在的扩展context
-const EXTRA_CONTEXT_OF_VAR = new WeakMap();
-function reactive(obj, context, rootProp) {
-    if (PROXY_MAP.has(obj))
-        return PROXY_MAP.get(obj);
-    if (OBJECT_VAR_ROOT_CONTEXT.has(obj)) {
-        if (rootProp) {
-            let pathMap = OBJECT_VAR_ROOT_PATH_IN_CONTEXT.get(context);
-            if (!pathMap) {
-                pathMap = new WeakMap();
-                OBJECT_VAR_ROOT_PATH_IN_CONTEXT.set(context, pathMap);
-            }
-            pathMap.set(obj, rootProp);
-            let contextList = EXTRA_CONTEXT_OF_VAR.get(obj);
-            if (!contextList) {
-                contextList = new Set();
-                EXTRA_CONTEXT_OF_VAR.set(obj, contextList);
-            }
-            contextList.add(context);
-        }
-        return obj;
-    }
-    const proxyObject = new Proxy(obj, {
-        get(target, prop, receiver) {
-            if (!prop)
-                return undefined;
-            const value = Reflect.get(target, prop, receiver);
-            if (isSymbol(prop))
-                return value;
-            if (isFunction(value))
-                return value;
-            if (prop === 'length' && isArray(target))
-                return value;
-            if (Collector.__collecting) {
-                let supPath = OBJECT_VAR_PATH.has(receiver) ? concat(OBJECT_VAR_PATH.get(receiver)) : [];
-                supPath.push(prop);
-                let propPath = supPath.join('.');
-                Collector.__varPathList.push(propPath);
-            }
-            if (PROXY_MAP.has(value))
-                return PROXY_MAP.get(value);
-            let reactiveVal = value;
-            if (isObject(value) && !isFunction(value) && !(value instanceof Node) && !Object.isFrozen(value)) {
-                reactiveVal = reactive(value, context);
-                let supPath = OBJECT_VAR_PATH.has(receiver) ? concat(OBJECT_VAR_PATH.get(receiver)) : [];
-                supPath.push(prop);
-                OBJECT_VAR_PATH.set(reactiveVal, supPath);
-                PROXY_MAP.set(value, reactiveVal);
-            }
-            return reactiveVal;
-        },
-        set(target, prop, newValue, receiver) {
-            if (!prop)
-                return false;
-            let ov = target[prop];
-            let chain = OBJECT_VAR_PATH.get(receiver) ?? [];
-            let subChain = concat(chain, [prop]);
-            let hasChanged = context._hasChangedPropOrStateMap?.get(subChain[0]);
-            let moreThan1 = subChain.length > 1;
-            let rootObjNew = newValue;
-            let rootObjOld = ov;
-            if (moreThan1) {
-                rootObjOld = rootObjNew = context._getPrivateData()[subChain[0]];
-            }
-            if (hasChanged) {
-                if (!hasChanged.call(context, rootObjNew, rootObjOld, subChain, newValue, ov))
-                    return true;
-            }
-            else {
-                //默认对比算法
-                if (Object.is(ov, newValue)) {
-                    return true;
-                }
-            }
-            let nv = newValue;
-            let rs = Reflect.set(target, prop, nv);
-            let extraContext = EXTRA_CONTEXT_OF_VAR.get(receiver);
-            let k = subChain.join('.');
-            //check watch
-            context._requestWatchUpdate(nv, ov, k, rootObjNew, rootObjOld);
-            //check computed
-            context._requestComputedUpdate(k);
-            notifyUpdate(context, rootObjOld, subChain);
-            each(extraContext, ctx => {
-                let ctxRootPath = ctx._wrapperProp[subChain[0]];
-                let ck = subChain.join('.');
-                ck = ck.replace(subChain[0], ctxRootPath);
-                //check watch
-                ctx._requestWatchUpdate(nv, ov, ck);
-                //check computed
-                ctx._requestComputedUpdate(ck);
-                notifyUpdate(ctx, rootObjOld, ck.split('.'));
-            });
-            return rs;
-        }
-    });
-    if (!OBJECT_VAR_PATH.has(proxyObject)) {
-        OBJECT_VAR_PATH.set(proxyObject, rootProp ? [rootProp] : []);
-    }
-    PROXY_MAP.set(obj, proxyObject);
-    if (rootProp) {
-        OBJECT_VAR_ROOT_CONTEXT.set(proxyObject, context);
-        if (!OBJECT_VAR_ROOT_PATH_IN_CONTEXT.has(context)) {
-            let pathMap = new WeakMap();
-            pathMap.set(proxyObject, rootProp);
-            OBJECT_VAR_ROOT_PATH_IN_CONTEXT.set(context, pathMap);
-        }
-    }
-    return proxyObject;
-}
-function notifyUpdate(context, oldValue, path, subNewValue, subOldValue) {
-    let i = size(path);
-    eachRight(path, (p) => {
-        let varPath = slice(path, 0, i--);
-        context._notify(oldValue, varPath);
-    });
-}
-const QMap = new Map();
-class Queue {
-    static nextSet = new Set();
-    static nextPending = false;
-    static next;
-    static flush() {
-        Queue.nextPending = false;
-        let nq = Array.from(Queue.nextSet);
-        Queue.nextSet.clear();
-        QMap.clear();
-        nq.forEach(u => u());
-        nq = null;
+    return (remove = false) => {
+        myfx.remove(AllOutsideDblClickEls, el => el[0] === node && el[1] === cbk);
+    };
+}
+function isExtEvent(evName) {
+    return ExtEvNames.includes(evName);
+}
+function addExtEvent(evName, node, cbk, parts, component) {
+    if (evName === 'resize') {
+        return addResize(node, cbk);
     }
-    static pushNext(updater) {
-        Queue.nextSet.add(updater);
-        if (!Queue.nextPending) {
-            Queue.nextPending = true;
-            Queue.next();
+    else if (evName === 'outside') {
+        switch (parts[0]) {
+            case 'mousedown':
+                return addOutsideMouseDown(node, cbk);
+            case 'dblclick':
+                return addOutsideDblClick(node, cbk);
+            case 'click':
+            default:
+                return addOutsideClick(node, cbk);
         }
     }
+    else if (evName === 'mutate') {
+        return addMutation(node, cbk, parts);
+    }
 }
-(() => {
-    const p = Promise.resolve();
-    const nextFn = Queue.flush;
-    Queue.next = () => {
-        p.then(nextFn);
+
+const MODI_EV_DEBOUNCE = /,|^(debounce:.+)|(debounce$)/;
+const MODI_EV_THROTTLE = /,|^(throttle:.+)|(throttle$)/;
+const MODI_EV_NATIVE = 'native';
+const MODI_EV_SELF = 'self';
+const MODI_EV_STOP = 'stop';
+const MODI_EV_PREVENT = 'prevent';
+const MODI_EV_ONCE = 'once';
+const MODI_EV_CAPTURE = 'capture';
+const MODI_EV_PASSIVE = 'passive';
+const MODI_EV_MOUSE_LEFT = 'left';
+const MODI_EV_MOUSE_RIGHT = 'right';
+const MODI_EV_MOUSE_MIDDLE = 'middle';
+const MODI_EV_KEYBOARD_COMBO_CTRL = 'ctrl';
+const MODI_EV_KEYBOARD_COMBO_ALT = 'alt';
+const MODI_EV_KEYBOARD_COMBO_SHIFT = 'shift';
+const MODI_EV_KEYBOARD_COMBO_META = 'meta';
+const MODI_EV_KEYBOARD_KEY_MAP = {
+    'esc': 'escape'
+};
+const MODI_PARAM_DIVIDER = ":";
+/*************************************************************
+ * 事件修饰符
+ * @author holyhigh2
+ *
+ * 全部通用 debounce/once/throttle/capture/passive 可组合
+ * 原生通用 stop/prevent/self 可组合
+ * 鼠标 left/right/middle 不可组合
+ * 键盘 ctrl/alt/shift/meta 可组合 esc/letters... 不可组合,多个key并列式表示可选
+ * 组件 native 监听组件元素原生事件
+ *
+ * 部分修饰符支持参数，使用冒号传参如：throttle:100 / debounce:100
+ *************************************************************/
+const VFN = () => { };
+function addEvent(fullName, cbk, node, component) {
+    let parts = fullName.split('.');
+    let evName = parts.shift();
+    let isOnce = parts.includes(MODI_EV_ONCE);
+    let c = cbk ?? VFN;
+    let modi;
+    if (modi = find(parts, x => MODI_EV_DEBOUNCE.test(x))) {
+        let params = modi.split(MODI_PARAM_DIVIDER);
+        c = debounce(c, parseInt(params[1]) || 100);
+    }
+    if (modi = find(parts, x => MODI_EV_THROTTLE.test(x))) {
+        let params = modi.split(MODI_PARAM_DIVIDER);
+        c = throttle(c, parseInt(params[1]) || 100);
+    }
+    if (isOnce) {
+        c = once(c);
+    }
+    if (node instanceof CompElem && !parts.includes(MODI_EV_NATIVE)) {
+        return node._addEvent(evName, cbk);
+    }
+    if (isExtEvent(evName)) {
+        return addExtEvent(evName, node, c, parts);
+    }
+    let listener = (e) => {
+        if (parts.includes(MODI_EV_PREVENT))
+            e.preventDefault();
+        if (parts.includes(MODI_EV_STOP))
+            e.stopPropagation();
+        if (parts.includes(MODI_EV_SELF) && e.target !== e.currentTarget)
+            return;
+        if (e instanceof MouseEvent) {
+            if (parts.includes(MODI_EV_MOUSE_LEFT) && e.button != 0)
+                return;
+            if (parts.includes(MODI_EV_MOUSE_RIGHT) && e.button != 2)
+                return;
+            if (parts.includes(MODI_EV_MOUSE_MIDDLE) && e.button != 1)
+                return;
+        }
+        else if (e instanceof KeyboardEvent) {
+            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_CTRL)[0] && !e.ctrlKey)
+                return;
+            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_ALT)[0] && !e.altKey)
+                return;
+            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_SHIFT)[0] && !e.shiftKey)
+                return;
+            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_META)[0] && !e.metaKey)
+                return;
+            let checkKeys = map(parts, k => MODI_EV_KEYBOARD_KEY_MAP[k] || k);
+            if (size(checkKeys) > 0 && !checkKeys.includes(e.key.toLowerCase()))
+                return;
+        }
+        c(e);
     };
-})();
+    let capture = parts.includes(MODI_EV_CAPTURE) || false;
+    let passive = parts.includes(MODI_EV_PASSIVE) || false;
+    let options = { capture, passive };
+    node.addEventListener(evName, listener, options);
+    //record
+    return (remove = false) => {
+        node.removeEventListener(evName, listener, options);
+        if (remove)
+            node = null;
+    };
+}
 
 const PropTypeMap = {
     boolean: Boolean,
@@ -767,29 +872,21 @@ class CompElem extends HTMLElement {
     }
     #cid;
     #slotPropsMap = {};
-    #data = {};
+    __data_ = {};
     #updateSources = {};
     #shadow;
     //保存所有渲染上下文 {CompElem/Directive}
     __updateTree;
-    __cssSheets;
-    _eventList;
+    _eventBindList;
+    _listerners = {};
     __docoEventMap;
-    __updateCssDeps;
     __updateSubViewDeps;
-    __updateViewDeps;
-    _watchUpdateMap;
-    _watchDeepUpdateMap;
-    _watchKeys;
-    _watchKeysOnceMap;
-    _watchKeysDeep;
+    _cssUpdateInNextTick = false;
+    _cssVarOldValueMap;
+    __cssSheets;
     _watchUpdateSetInNextTick;
     _watchUpdateArgsInNextTick;
-    _computedUpdateDeps;
     _computedUpdateSetInNextTick;
-    _hasChangedPropOrStateMap;
-    _hasSyncPropSet;
-    _hasShallowStateSet;
     get [Symbol.toStringTag]() {
         return this.constructor.name;
     }
@@ -812,29 +909,29 @@ class CompElem extends HTMLElement {
         return this.#parentComponent?.deref();
     }
     get wrapperComponent() {
-        return this.#wrapperComponent?.deref();
+        return this.__wrapperComponent?.deref();
+    }
+    get slots() {
+        return EMPTY_SLOTS;
     }
     get slotHooks() {
         return this.#slotHooks;
     }
-    get styleSheets() {
-        return ComponentStaticStyleMap.get(this);
+    get cssSheets() {
+        return ComponentStaticStyleMap.get(this.constructor);
     }
-    get globalStyleSheet() {
+    get globalCssSheet() {
         return CompElem.__l_globalRule.sheet;
     }
     get isMounted() {
         return this.#mounted;
     }
-    get slots() {
-        return EMPTY_SLOTS;
-    }
     #attrs;
     #props;
     #renderRoot;
     #renderRoots;
     #parentComponent;
-    #wrapperComponent;
+    __wrapperComponent;
     #slotsEl = {};
     #slotHooks = {};
     #slotNodes = {};
@@ -845,33 +942,46 @@ class CompElem extends HTMLElement {
     /**
      * 组件样式，CSSStyleSheet可动态变更
      */
-    static get styles() {
+    static get css() {
         return [];
     }
-    static get globalStyle() {
+    static get globalCss() {
         return undefined;
     }
-    static get hostStyle() {
+    static get hostCss() {
         return undefined;
     }
-    get styles() {
-        return [];
+    get cssVars() {
+        return {};
     }
-    #inited = false;
+    __inited = false;
     #initiating = false;
+    #onSlotChangeHookBindThis;
+    __thisRef;
     constructor(...args) {
         super();
         this.#cid = CompElemSn++;
         this.__updateTree = [];
+        this.__thisRef = new WeakRef(this);
+        this.#onSlotChangeHookBindThis = this.#onSlotChangeHook.bind(this);
         //init props via constructor
         if (size(args) === 1) {
             this.#props = {};
             assign(this.#props, first(args));
         }
         /////////////////////////////////////////////////// slots
-        // this.#updateSlotsAry()
+        if (!Reflect.getOwnPropertyDescriptor(this.constructor.prototype, 'slots')) {
+            Reflect.defineProperty(this.constructor.prototype, 'slots', {
+                get() {
+                    return getterValue(undefined, 'slots', this);
+                },
+                set(v) {
+                    setterValue('slots', v, this);
+                }
+            });
+        }
         /////////////////////////////////////////////////// decorators create
-        let ary = DefinitionDecoratorMap.get(this.constructor.name) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor).name);
+        let ary = DefinitionDecoratorMap.get(this.constructor) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor));
         ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => dw.create(this));
         this.#updatedD = this.#update.bind(this);
     }
@@ -894,7 +1004,7 @@ class CompElem extends HTMLElement {
         }
         this.#shadow.adoptedStyleSheets = [...this.#shadow.adoptedStyleSheets, cssSheet];
         // Keep ComponentStyleMap in sync for this constructor
-        const cur = ComponentStaticStyleMap.get(this) ?? [];
+        const cur = ComponentStaticStyleMap.get(this.constructor) ?? [];
         cur.push(cssSheet);
         return cssSheet;
     }
@@ -921,8 +1031,8 @@ class CompElem extends HTMLElement {
             document.head.appendChild(CompElem.__l_globalRule);
         }
         //host styles
-        let hostStyle = get(this.constructor, "hostStyle");
-        let styleSheet = get(this.constructor, 'hostStyleSheet');
+        let hostStyle = get(this.constructor, "hostCss");
+        let styleSheet = get(this.constructor, 'hostCssSheet');
         if (hostStyle) {
             if (!styleSheet) {
                 if (isString(hostStyle)) {
@@ -932,11 +1042,11 @@ class CompElem extends HTMLElement {
                 else {
                     styleSheet = hostStyle;
                 }
-                set(this.constructor, 'hostStyleSheet', styleSheet);
+                set(this.constructor, 'hostCssSheet', styleSheet);
             }
-            let styleRoot = this.#wrapperComponent?.deref()?.shadowRoot ?? this.#parentComponent?.deref()?.shadowRoot ?? this.ownerDocument;
+            let styleRoot = this.__wrapperComponent?.deref()?.shadowRoot ?? this.#parentComponent?.deref()?.shadowRoot ?? this.ownerDocument;
             //detached el
-            if (this.#wrapperComponent && !this.#wrapperComponent.deref()?.shadowRoot?.contains(this)) {
+            if (this.__wrapperComponent && !this.__wrapperComponent.deref()?.shadowRoot?.contains(this)) {
                 styleRoot = closest(this, n => n instanceof HTMLDocument || n instanceof ShadowRoot, 'parentNode');
             }
             if (styleRoot && styleSheet && !styleRoot.adoptedStyleSheets.includes(styleSheet)) {
@@ -950,7 +1060,7 @@ class CompElem extends HTMLElement {
         this.__unbindEvents();
     }
     __bindEvents() {
-        let evs = this._eventList;
+        let evs = this._eventBindList;
         each(evs, (v) => {
             let [evName, cbk, node, binded] = v;
             if (binded)
@@ -962,7 +1072,7 @@ class CompElem extends HTMLElement {
             v[3] = unbinder;
         });
         //event decoration
-        let events = DefinitionCompEventMap.get(this.constructor.name);
+        let events = DefinitionCompEventMap.get(this.constructor);
         if (size(events) > 0) {
             if (!this.__docoEventMap)
                 this.__docoEventMap = new Map();
@@ -978,7 +1088,7 @@ class CompElem extends HTMLElement {
         }
     }
     __unbindEvents() {
-        each(this._eventList, (v) => {
+        each(this._eventBindList, (v) => {
             let [, , , unbinder] = v;
             if (unbinder)
                 unbinder();
@@ -1004,45 +1114,26 @@ class CompElem extends HTMLElement {
         if (this.#destroyed)
             return;
         this.#destroyed = true;
-        let ary = DefinitionDecoratorMap.get(this.constructor.name) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor).name);
+        let ary = DefinitionDecoratorMap.get(this.constructor) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor));
         ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => {
             dw.destroy(this);
         });
         this.beforeDestroyed();
         //events
         this.__unbindEvents();
-        each(this.#rootEvs, (hooks, evName) => {
-            each(hooks, hook => {
-                this.removeEventListener(evName, hook);
-            });
-            this.#rootEvs[evName] = null;
-        });
-        each(this.#nodeEvs, (hooks, evName) => {
-            each(hooks, ([hook, ref]) => {
-                ref.deref()?.removeEventListener(evName, hook);
-            });
-            this.#nodeEvs[evName] = null;
-        });
+        this._listerners = null;
         this.__docoEventMap?.clear();
-        this.__docoEventMap = this._eventList = null;
+        this.__docoEventMap = this._eventBindList = null;
         //styles
-        ComponentStaticStyleMap.delete(this);
         ComponentDynamicCssUpdaterMap.get(this)?.clear();
         ComponentDynamicCssUpdaterMap.delete(this);
         //reactive
         this._watchUpdateArgsInNextTick?.clear();
         this._watchUpdateSetInNextTick?.clear();
-        this._watchKeysOnceMap?.clear();
-        this._watchUpdateMap = this._watchDeepUpdateMap = this._watchKeys = this._watchKeysDeep = this._watchKeysOnceMap = null;
-        this._computedUpdateDeps?.clear();
         this._computedUpdateSetInNextTick?.clear();
-        this._computedUpdateDeps = this._computedUpdateSetInNextTick = null;
-        this.__updateCssDeps = this.__updateViewDeps = null;
+        this._computedUpdateSetInNextTick = null;
+        this.__cssSheets = null;
         this.__updateSubViewDeps?.clear();
-        this._hasChangedPropOrStateMap?.clear();
-        this._hasShallowStateSet?.clear();
-        this._hasSyncPropSet?.clear();
-        this._hasChangedPropOrStateMap = this._hasShallowStateSet = this._hasSyncPropSet = null;
         //sup scope
         if (this.#parentComponent) {
             let pComp = this.#parentComponent.deref();
@@ -1065,32 +1156,28 @@ class CompElem extends HTMLElement {
         each(this.#slotNodes, (nodes) => {
             each(nodes, (node) => node.remove());
         });
-        each(this.#data.slots, (nodes, k) => {
+        each(this.__data_.slots, (nodes, k) => {
             each(nodes, (node) => node.remove());
         });
         this.#updateSlots.clear();
-        this.#updateSlots = this.#slotPropsMap = this.#data.slots = null;
+        this.#slotNodes = this.#slotsEl = this.#updateSlots = this.#slotPropsMap = this.__data_.slots = null;
         this.remove();
         //data
         this._wrapperProp =
-            this.#slotNodes =
-                this.#propsReady =
-                    this.#renderRoot = this.#renderRoots = this.#shadow =
-                        this.#rootEvs =
-                            this.#nodeEvs =
-                                this.#updateSources =
-                                    this.#attrs =
-                                        this.#props =
-                                            this.#renderRoot =
-                                                this.#renderRoots =
-                                                    this.#slotHooks =
-                                                        this.#updatedD =
-                                                            this.#data =
-                                                                this.#slotsEl =
-                                                                    this.__updateTree =
-                                                                        this.#parentComponent =
-                                                                            this._asyncDirectives =
-                                                                                this.#wrapperComponent = null;
+            this.#propsReady =
+                this.#renderRoot = this.#renderRoots = this.#shadow =
+                    this.#updateSources =
+                        this.#attrs =
+                            this.#props =
+                                this.#renderRoot =
+                                    this.#renderRoots =
+                                        this.#slotHooks =
+                                            this.#updatedD =
+                                                this.__data_ =
+                                                    this.__updateTree =
+                                                        this.#parentComponent =
+                                                            this._asyncDirectives =
+                                                                this.__wrapperComponent = null;
         //unmount
         this.destroyed();
     }
@@ -1098,24 +1185,23 @@ class CompElem extends HTMLElement {
     //********************************** 首次渲染
     //构造时上级传递的参数
     __init() {
-        if (this.#inited)
+        if (this.__inited)
             return;
         //防止在钩子中出现重新挂载的情况
         if (this.#initiating)
             return;
         this.#initiating = true;
-        let thisRef = new WeakRef(this);
         //global styles
-        let globalTextContent = get(this.constructor, "globalStyle");
+        let globalTextContent = get(this.constructor, "globalCss");
         if (!isEmpty(globalTextContent) && isString(globalTextContent) && !get(this.constructor, '_globalRuleInserted')) {
             CompElem.__l_globalRule.textContent += globalTextContent; //.sheet?.insertRule(globalTextContent, 0)
             set(this.constructor, '_globalRuleInserted', true);
         }
         //component styles
-        let beAttached2 = ComponentStaticStyleMap.get(this);
+        let beAttached2 = ComponentStaticStyleMap.get(this.constructor);
         let styleSheets = beAttached2 ?? [];
         if (!beAttached2) {
-            each(get(this.constructor, "styles"), (st) => {
+            each(get(this.constructor, "css"), (st) => {
                 if (isString(st)) {
                     let sheet = new CSSStyleSheet();
                     sheet.replaceSync(st);
@@ -1126,156 +1212,78 @@ class CompElem extends HTMLElement {
                     styleSheets.push(st);
                 }
             });
-            ComponentStaticStyleMap.set(this, styleSheets);
+            ComponentStaticStyleMap.set(this.constructor, styleSheets);
         }
         ////////////////////////////////////////////////// Props & States
         const props = this.#initProps();
         this.propsReady(props);
         for (const key in props) {
             const v = props[key];
-            this.#data[key] = v;
+            this.__data_[key] = v;
         }
         this.#initStates();
         //2. Data
-        this.#data.slots = {};
-        each(this.#data, (v, k) => {
-            let descr = Reflect.getOwnPropertyDescriptor(this.#data, k);
-            Reflect.defineProperty(this, k, {
-                get() {
-                    let thisHost = thisRef.deref();
-                    let v = descr?.get ? descr?.get() : Reflect.get(thisHost.#data, k);
-                    if (Collector.__collecting) {
-                        Collector.__varPathList.push(k);
-                    }
-                    if (PROXY_MAP.has(v)) {
-                        let contextList = EXTRA_CONTEXT_OF_VAR.get(v);
-                        if (!contextList) {
-                            contextList = new Set();
-                            EXTRA_CONTEXT_OF_VAR.set(v, contextList);
-                        }
-                        contextList.add(thisHost);
-                        return PROXY_MAP.get(v);
-                    }
-                    if (isObject(v) && !isFunction(v) && !(v instanceof Node) && !Object.isFrozen(v)) {
-                        let shallow = thisHost._hasShallowStateSet?.has(k);
-                        v = shallow || k === PROP_NAME_SLOTS ? v : reactive(v, this, k);
-                    }
-                    return v;
-                },
-                set(v) {
-                    if (descr?.set) {
-                        descr?.set(v);
-                    }
-                    else {
-                        let thisHost = thisRef.deref();
-                        if (!thisHost.#inited) {
-                            Reflect.set(thisHost.#data, k, v);
-                            return;
-                        }
-                        let oldValue = thisHost.#data[k];
-                        let hasChanged = thisHost._hasChangedPropOrStateMap?.get(k);
-                        if (hasChanged) {
-                            if (!hasChanged.call(thisHost, v, oldValue, [k], v, oldValue))
-                                return true;
-                        }
-                        else {
-                            //默认对比算法
-                            if (Object.is(oldValue, v)) {
-                                return true;
-                            }
-                        }
-                        //check watch
-                        thisHost._requestWatchUpdate(v, oldValue, k);
-                        //check computed
-                        thisHost._requestComputedUpdate(k);
-                        Reflect.set(thisHost.#data, k, v);
-                        thisHost._notify(oldValue, [k]);
-                        //update sync
-                        if (thisHost._hasSyncPropSet?.has(k)) {
-                            thisHost.emit('update' + ":" + k, { value: v });
-                        }
-                    }
-                },
-            });
-        });
-        Reflect.defineProperty(this.#data, '__isData', {
+        this.__data_.slots = {};
+        Reflect.defineProperty(this.__data_, '__isData', {
             enumerable: false,
             value: true
         });
         //3. Watch
-        let watchMap = DefinitionWatchMap.get(this.constructor.name) ?? DefinitionWatchMap.get(_getSuper(this.constructor).name);
-        if (watchMap) {
-            this._watchUpdateMap = {};
-            this._watchDeepUpdateMap = {};
-            this._watchKeys = [];
-            this._watchKeysDeep = [];
+        let superComp = _getSuper(this.constructor);
+        let watchKeys = WatchKeysListMap.get(this.constructor) ?? WatchKeysListMap.get(superComp);
+        if (watchKeys) {
             this._watchUpdateSetInNextTick = new Set();
             this._watchUpdateArgsInNextTick = new Map();
-            this._watchKeysOnceMap = new Map();
-            each(watchMap, (watchList, k) => {
-                watchList.forEach(v => {
-                    let { source, options, handler } = v;
-                    let fn = handler;
-                    let onceWatch = get(options, "once", false);
-                    if (onceWatch) {
-                        this._watchKeysOnceMap.set(k, false);
-                    }
-                    let deep = get(options, "deep", false);
-                    this._watchKeys.push(k);
-                    if (deep) {
-                        this._watchDeepUpdateMap[k] = this._watchDeepUpdateMap[k] ?? new Set();
-                        this._watchDeepUpdateMap[k].add(fn);
-                        this._watchKeysDeep.push(k);
-                    }
-                    else {
-                        this._watchUpdateMap[k] = this._watchUpdateMap[k] ?? new Set();
-                        this._watchUpdateMap[k].add(fn);
-                    }
-                    let immediate = get(options, "immediate", false);
-                    if (!immediate)
-                        return;
-                    let nv = get(this, source);
-                    fn.call(this, nv, undefined, source);
-                    if (onceWatch) {
-                        this._watchKeysOnceMap.set(k, true);
-                    }
+            let onceMap = WatchKeysOnceMap.get(this.constructor) ?? WatchKeysOnceMap.get(superComp);
+            let watchImmediateList = WatchImmediateListMap.get(this.constructor) ?? WatchImmediateListMap.get(superComp);
+            each(watchImmediateList, (fns, k) => {
+                let nv = get(this, k);
+                fns.forEach(fn => {
+                    fn.call(this, nv, undefined, k);
                 });
+                if (onceMap.has(k)) {
+                    onceMap.set(k, true);
+                }
             });
         }
         //4. Computed
-        let computedMap = DefinitionComputedMap.get(this.constructor.name) ?? DefinitionComputedMap.get(_getSuper(this.constructor).name);
+        let computedMap = assign({}, DefinitionComputedMap.get(this.constructor), DefinitionComputedMap.get(superComp));
         if (computedMap) {
-            this._computedUpdateDeps = new Map();
             this._computedUpdateSetInNextTick = new Set();
-            each(computedMap, (getter, propKey) => {
-                set(getter, 'key', propKey);
-                Collector.start();
-                this.#data[propKey] = getter.call(this);
-                Collector.end();
-                let computedDeps = Collector.popVarPathList();
-                computedDeps.forEach(dep => {
-                    let list = this._computedUpdateDeps.get(dep);
-                    if (!list) {
-                        list = new Set();
-                        this._computedUpdateDeps.set(dep, list);
-                    }
-                    list.add(getter);
-                });
-                Reflect.defineProperty(this, propKey, {
-                    get() {
-                        let v = Reflect.get(thisRef.deref().#data, propKey);
-                        if (Collector.__collecting) {
-                            Collector.__varPathList.push(propKey);
+            let depMap = ComputedUpdateDepsMap.get(this.constructor);
+            if (!depMap) {
+                depMap = new Map();
+                ComputedUpdateDepsMap.set(this.constructor, depMap);
+                each(computedMap, (getter, propKey) => {
+                    set(getter, 'key', propKey);
+                    Collector.start();
+                    this[DATA_KEY][propKey] = getter.call(this);
+                    Collector.end();
+                    let computedDeps = Collector.popVarPathList();
+                    computedDeps.forEach(dep => {
+                        let list = depMap.get(dep);
+                        if (!list) {
+                            list = new Set();
+                            depMap.set(dep, list);
                         }
-                        return v;
-                    }
+                        list.add(getter);
+                    });
                 });
-            });
+            }
+            else {
+                each(computedMap, (getter, propKey) => {
+                    this[DATA_KEY][propKey] = getter.call(this);
+                });
+            }
         }
         //5. Render
         Collector.start();
         let tmpl = this.render();
         Collector.end();
+        let viewDeps = Collector.popVarPathList();
+        if (!this.constructor.prototype._viewDeps) {
+            this.constructor.prototype._viewDeps = viewDeps;
+        }
         let nodes;
         if (tmpl === null) {
             this.#renderRoots = [];
@@ -1286,16 +1294,14 @@ class CompElem extends HTMLElement {
             this.#shadow = this.attachShadow({
                 mode: "open"
             });
-            let viewDeps = Collector.popVarPathList();
-            this.__updateViewDeps = viewDeps;
-            this.#shadow.adoptedStyleSheets = [...DefaultCss, ...(ComponentStaticStyleMap.get(this) ?? [])];
+            this.#shadow.adoptedStyleSheets = [...DefaultCss, ...(ComponentStaticStyleMap.get(this.constructor) ?? [])];
             nodes = buildView(tmpl, this);
             if (nodes) {
                 this.#renderRoots = filter(nodes, (n) => n.nodeType === Node.ELEMENT_NODE).map(n => new WeakRef(n));
-                this.#renderRoot = new WeakRef(nodes[0]);
+                this.#renderRoot = this.#renderRoots[0];
             }
         }
-        this.#inited = true;
+        this.__inited = true;
         /////////////////////////////////////////////////// slots
         this.#updateSlotsAry();
         //slot hook
@@ -1303,11 +1309,11 @@ class CompElem extends HTMLElement {
             this.#updateSlot(k);
         });
         const that = this;
-        let ary = DefinitionDecoratorMap.get(this.constructor.name) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor).name);
+        let ary = DefinitionDecoratorMap.get(this.constructor) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor));
         ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => {
             dw.beforeMount(this, (key, value) => {
-                that.#data[key] = value;
-                return that.#data[key];
+                that.__data_[key] = value;
+                return that.__data_[key];
             });
         });
         this.beforeMount();
@@ -1319,30 +1325,34 @@ class CompElem extends HTMLElement {
             this.#mounted = true;
             if (this.#shadow) {
                 //instance dynamic style
-                let cssAry = [];
                 Collector.start();
-                let cssTmpls = this.styles;
+                let cssVarObj = this.cssVars;
                 Collector.end();
-                this.__updateCssDeps = Collector.popVarPathList();
-                cssTmpls.forEach(cssTmpl => {
-                    let cssss = new CSSStyleSheet();
-                    cssAry.push(cssss);
-                    let css = cssTmpl.getCss(this);
-                    if (isBlank(css))
-                        return;
-                    cssss.replaceSync(css);
-                });
-                if (cssAry.length > 0) {
-                    this.__cssSheets = cssAry;
-                    this.#shadow.adoptedStyleSheets = [...this.#shadow.adoptedStyleSheets, ...cssAry];
+                if (!isEmpty(cssVarObj)) {
+                    this._cssVarOldValueMap = {};
+                    let deps = CssUpdateDepsMap.get(this.constructor);
+                    if (!deps) {
+                        deps = new Set(Collector.popVarPathList());
+                        CssUpdateDepsMap.set(this.constructor, deps);
+                    }
+                    let cssStr = '';
+                    each(cssVarObj, (v, k) => {
+                        let cssVarKey = '--' + kebabCase(k).replace(/^-+/, '');
+                        if (isBlank(v) || isNil(v)) {
+                            v = 'initial'; // invalid value
+                        }
+                        this._cssVarOldValueMap[cssVarKey] = v;
+                        cssStr += ';' + cssVarKey + ':' + v;
+                    });
+                    this.style.cssText += cssStr;
                 }
             }
             if (nodes)
                 this.#shadow.append(...nodes);
             ary && ary.forEach(dw => {
                 dw.mounted(this, (key, value) => {
-                    that.#data[key] = value;
-                    return that.#data[key];
+                    that.__data_[key] = value;
+                    return that.__data_[key];
                 });
             });
             if (this.#updateNextImmediatelyQ) {
@@ -1361,7 +1371,7 @@ class CompElem extends HTMLElement {
     }
     beforeMount() { }
     mounted() { }
-    __onSlotChangeHook(e) {
+    #onSlotChangeHook(e) {
         let t = e.currentTarget;
         let name = '';
         each(this.#slotsEl, (el, n) => {
@@ -1370,7 +1380,7 @@ class CompElem extends HTMLElement {
                 return false;
             }
         });
-        if (this.#inited)
+        if (this.__inited)
             this.#onSlotChange(t, name === SLOT_NAME_DEFAULT ? '' : name);
     }
     #onSlotChange(slot, name) {
@@ -1413,18 +1423,18 @@ class CompElem extends HTMLElement {
     }
     slotChange(slot, name) { }
     attributeChangedCallback(attributeName, oldValue, newValue) {
-        if (!this.#inited)
+        if (!this.__inited)
             return;
         if (Object.is(newValue, oldValue))
             return;
         let propName = camelCase(attributeName);
-        let propDef = DefinitionPropMap.get(this.constructor.name)[propName];
+        let propDef = DefinitionPropMap.get(this.constructor)[propName];
         if (isBooleanProp(propDef.type)) {
             let v = isNull(newValue) ? false : getBooleanValue(newValue);
             if (get(this, propName) === v)
                 return;
         }
-        this.__attrChanged(attributeName, oldValue, newValue);
+        this.#attrChanged(attributeName, oldValue, newValue);
     }
     //********************************** 更新
     /**
@@ -1442,8 +1452,6 @@ class CompElem extends HTMLElement {
      * @param changed
      */
     updated(changed) { }
-    #rootEvs = {};
-    #nodeEvs = {};
     /**
      * 由监控变量调用
      * @param stateKey
@@ -1467,33 +1475,6 @@ class CompElem extends HTMLElement {
         }
         Queue.pushNext(this.#updatedD);
     }
-    _requestWatchUpdate(newValue, oldValue, fullPath, rootObjNew, rootObjOld) {
-        this._watchKeys?.forEach(wk => {
-            if (fullPath === wk ||
-                (startsWith(wk, fullPath + '.') && !Object.is(get(this._getPrivateData(), wk), get(newValue, wk))) ||
-                (startsWith(fullPath, wk + '.') && this._watchKeysDeep.includes(wk) && !Object.is(get(this._getPrivateData(), wk), get(newValue, wk)))) {
-                concat(toArray(this._watchUpdateMap[wk]), toArray(this._watchDeepUpdateMap[wk])).forEach(fn => {
-                    if (!fn)
-                        return;
-                    if (this._watchKeysOnceMap.get(wk) === true)
-                        return;
-                    this._watchUpdateArgsInNextTick.set(fn, {
-                        newValue, oldValue, chain: fullPath.split('.'), rootObjNew, rootObjOld, fullMatch: wk === fullPath
-                    });
-                    this._watchUpdateSetInNextTick.add(fn);
-                    if (this._watchKeysOnceMap.has(wk))
-                        this._watchKeysOnceMap.set(wk, true);
-                });
-            }
-        });
-    }
-    _requestComputedUpdate(fullPath) {
-        if (this._computedUpdateDeps?.has(fullPath)) {
-            this._computedUpdateDeps.get(fullPath)?.forEach(fn => {
-                this._computedUpdateSetInNextTick.add(fn);
-            });
-        }
-    }
     #update() {
         if (size(this.#updateSources) < 1)
             return;
@@ -1505,19 +1486,16 @@ class CompElem extends HTMLElement {
         if (toBreak)
             return;
         //update decorators
-        let ary = DefinitionDecoratorMap.get(this.constructor.name) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor).name);
+        let ary = DefinitionDecoratorMap.get(this.constructor) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor));
         ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => {
             dw.updated(this, changed);
         });
         //1. filter update point
-        let toUpdateCss = false;
         let toUpdateView = false;
         let toUpdateUps = new Set();
+        let viewDeps = this.constructor.prototype._viewDeps;
         each(changed, (x, k) => {
-            if (this.__updateCssDeps?.includes(k)) {
-                toUpdateCss = true;
-            }
-            if (!toUpdateView && this.__updateViewDeps?.includes(k)) {
+            if (!toUpdateView && viewDeps?.includes(k)) {
                 toUpdateView = true;
             }
             if (this.__updateSubViewDeps?.has(k)) {
@@ -1538,18 +1516,32 @@ class CompElem extends HTMLElement {
         // update computed
         this._computedUpdateSetInNextTick?.forEach(fn => {
             let k = get(fn, 'key');
-            let oldValue = this.#data[k];
+            let oldValue = this.__data_[k];
             let newValue = fn.call(this);
             if (!isObject(newValue) && newValue === oldValue)
                 return;
-            this.#data[k] = newValue;
+            this.__data_[k] = newValue;
             this._notify(oldValue, [k]);
         });
         this._computedUpdateSetInNextTick?.clear();
+        // update css
+        if (this._cssUpdateInNextTick) {
+            let cssVarObj = this.cssVars;
+            each(cssVarObj, (v, k) => {
+                let cssVarKey = '--' + kebabCase(k).replace(/^-+/, '');
+                if (this._cssVarOldValueMap[cssVarKey] == v) {
+                    return;
+                }
+                if (isBlank(v) || isNil(v)) {
+                    v = 'initial'; // invalid value
+                }
+                this._cssVarOldValueMap[cssVarKey] = v;
+                this.style.setProperty(cssVarKey, v + '');
+            });
+        }
         //2. update view
         if (this.#renderRoot?.deref()) {
             if (toUpdateView) {
-                console.debug('update view....', this.constructor.name);
                 updateView(this.render(), this, this.__updateTree);
             }
             if (size(toUpdateUps) > 0) {
@@ -1562,10 +1554,6 @@ class CompElem extends HTMLElement {
         this.#updateSlots.forEach((v) => {
             this.#updateSlot(v);
         });
-        //update dcss
-        if (toUpdateCss) {
-            this.#updateCss();
-        }
         this.updated(changed);
     }
     /**
@@ -1575,7 +1563,7 @@ class CompElem extends HTMLElement {
      * @returns 非props的attr集合
      */
     #initProps() {
-        let propDefs = DefinitionPropMap.get(this.constructor.name) ?? DefinitionPropMap.get(_getSuper(this.constructor).name);
+        let propDefs = DefinitionPropMap.get(this.constructor) ?? DefinitionPropMap.get(_getSuper(this.constructor));
         let attrs = this.attributes;
         let tagName = this.tagName;
         let parentProps = this.#props;
@@ -1594,7 +1582,7 @@ class CompElem extends HTMLElement {
         this.#attrs = this.#attrs ? assign(this.#attrs, filterAttrs) : filterAttrs;
         let rs = {};
         if (!propDefs)
-            return Object.seal(rs);
+            return rs;
         let keys = Object.keys(propDefs);
         let size = keys.length;
         for (let i = 0; i < size; i++) {
@@ -1618,18 +1606,6 @@ class CompElem extends HTMLElement {
                     propDef.type = inferredType;
                 }
             }
-            if (propDef.hasChanged) {
-                if (!this._hasChangedPropOrStateMap) {
-                    this._hasChangedPropOrStateMap = new Map();
-                }
-                this._hasChangedPropOrStateMap.set(key, propDef.hasChanged);
-            }
-            if (propDef.sync) {
-                if (!this._hasSyncPropSet) {
-                    this._hasSyncPropSet = new Set();
-                }
-                this._hasSyncPropSet.add(key);
-            }
             let val = undefined;
             if (isInited) {
                 val = isNil(parentProps[key]) ? defaultVal : parentProps[key];
@@ -1650,25 +1626,14 @@ class CompElem extends HTMLElement {
                 break;
             }
             val = this.#propTypeCheck(propDefs, key, val, hasAttr);
-            let getter = get(propDefs, [key, 'getter']);
-            if (getter)
-                getter = bind$1(getter, this);
-            let setter = get(propDefs, [key, 'setter']);
-            if (setter)
-                setter = bind$1(setter, this);
-            if (getter || setter) {
-                Reflect.defineProperty(this.#data, key, {
-                    set: setter || function (v) { },
-                    get: getter
-                });
-            }
             if (propDef.attribute && isDefined(val) && !isObject(val)) {
                 this.#updateAttribute(propDef, key, val);
             }
-            this.#data[key] = val;
+            this.__data_[key] = val;
             rs[key] = val;
+            delete this[key];
         }
-        return Object.seal(rs);
+        return rs;
     }
     #updateAttribute(propDef, key, val) {
         let k = kebabCase(key);
@@ -1766,35 +1731,24 @@ class CompElem extends HTMLElement {
             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)) {
+            if (!validator.call(this, val, this.__data_)) {
                 showTagError(this.tagName, `Invalid prop '${propKey}'. IsValid() check failed`);
             }
         }
         return val;
     }
     #initStates() {
-        let stateDefs = DefinitionStateMap.get(this.constructor.name) ?? DefinitionStateMap.get(_getSuper(this.constructor).name);
+        let stateDefs = DefinitionStateMap.get(this.constructor) ?? DefinitionStateMap.get(_getSuper(this.constructor));
         if (stateDefs)
             each(stateDefs, (def, key) => {
                 let stateDef = stateDefs[key];
                 let val = get(this, key);
                 if (stateDef) {
                     let propName = stateDef.prop;
-                    val = propName ? cloneDeep(this.#data[propName]) : get(this, key);
-                }
-                if (stateDef.hasChanged) {
-                    if (!this._hasChangedPropOrStateMap) {
-                        this._hasChangedPropOrStateMap = new Map();
-                    }
-                    this._hasChangedPropOrStateMap.set(key, stateDef.hasChanged);
-                }
-                if (stateDef.shallow) {
-                    if (!this._hasShallowStateSet) {
-                        this._hasShallowStateSet = new Set();
-                    }
-                    this._hasShallowStateSet.add(key);
+                    val = propName ? cloneDeep(this.__data_[propName]) : get(this, key);
                 }
-                this.#data[key] = val;
+                this.__data_[key] = val;
+                delete this[key];
             });
     }
     /**
@@ -1803,9 +1757,8 @@ class CompElem extends HTMLElement {
      * @param attrs
      */
     #propsReady = debounce(this.propsReady, 100);
-    //todo 这里需要直接修改prop
     _updateProps(props) {
-        let propDefs = DefinitionPropMap.get(this.constructor.name);
+        let propDefs = DefinitionPropMap.get(this.constructor);
         if (!propDefs)
             return;
         let need2UpdateAttrs = [];
@@ -1838,10 +1791,10 @@ class CompElem extends HTMLElement {
                 if (fromPath) {
                     let propPath = fromPath.join(PATH_SEPARATOR);
                     this._wrapperProp[propPath] = k;
-                    let parentStateDefs = this.wrapperComponent ? DefinitionStateMap.get(this.wrapperComponent?.constructor.name) : null;
+                    let parentStateDefs = this.wrapperComponent ? DefinitionStateMap.get(this.wrapperComponent?.constructor) : null;
                     let parentStateKey = fromPath[0];
                     if (parentStateDefs && parentStateDefs[parentStateKey]) {
-                        let propDefs = DefinitionPropMap.get(this.constructor.name);
+                        let propDefs = DefinitionPropMap.get(this.constructor);
                         set(propDefs, [k, 'shallow'], parentStateDefs[parentStateKey].shallow);
                     }
                 }
@@ -1857,7 +1810,9 @@ class CompElem extends HTMLElement {
             this.#slotsEl[name] = slot;
             SlotCompMap.set(slot, this);
         }
-        this.addEvent(slot, 'slotchange', this.__onSlotChangeHook);
+        let evName = 'slotchange';
+        let unbinder = addEvent(evName, this.#onSlotChangeHookBindThis, slot);
+        this._eventBindList.push([evName, this.#onSlotChangeHookBindThis, slot, unbinder]);
         //3. 保存参数
         if (!isEmpty(props)) {
             let slotMap = this.#slotPropsMap[name];
@@ -1957,9 +1912,9 @@ class CompElem extends HTMLElement {
         if (!hook)
             return;
         let slotMap = this.#slotPropsMap[name];
-        if (!this.#data.slots)
+        if (!this.__data_.slots)
             return;
-        let slot = this.#data.slots[name];
+        let slot = this.__data_.slots[name];
         //slot not ready yet
         //1. 可能是if/each等指令还未插入
         if (!slot)
@@ -1986,22 +1941,14 @@ class CompElem extends HTMLElement {
     _asyncDirectives = new WeakMap();
     renderAsync(cbk, ...args) {
     }
-    #updateCss() {
-        let cssTmpls = this.styles;
-        cssTmpls.forEach((cssTmpl, i) => {
-            let cssss = this.__cssSheets[i];
-            let css = cssTmpl.getCss(this);
-            cssss.replaceSync(css);
-        });
-    }
-    __attrChanged(name, oldValue, newValue) {
-        if (!this.#inited)
+    #attrChanged(name, oldValue, newValue) {
+        if (!this.__inited)
             return;
         let observedAttrs = _getObservedAttrs(this.constructor);
         if (observedAttrs.has(name)) {
             let camelName = camelCase(name);
             if (isNull(newValue)) {
-                let propDefs = DefinitionPropMap.get(this.constructor.name);
+                let propDefs = DefinitionPropMap.get(this.constructor);
                 //使用默认值
                 if (propDefs)
                     newValue = propDefs[camelName]._defaultValue;
@@ -2009,9 +1956,6 @@ class CompElem extends HTMLElement {
             this._updateProps({ [camelName]: newValue });
         }
     }
-    _regWrapper(wrapperComponent) {
-        this.#wrapperComponent = new WeakRef(wrapperComponent);
-    }
     _regSubViewDeps(props, up) {
         if (!this.__updateSubViewDeps) {
             this.__updateSubViewDeps = new Map();
@@ -2026,78 +1970,38 @@ class CompElem extends HTMLElement {
         });
     }
     _getPrivateData() {
-        return this.#data;
+        return this.__data_;
     }
     ////////////////////----------------------------/////////////// APIs
     /**
-     * 抛出自定义事件
+     * 发出组件事件
      * @param evName 事件名称
      * @param args 自定义参数
      */
-    emit(evName, arg = {}, options) {
-        if (options && options.event) {
-            arg.event = options.event;
+    emit(evName, arg = {}, event) {
+        if (event) {
+            arg.event = event;
         }
         arg.target = this;
-        this.dispatchEvent(new CustomEvent(evName, {
-            bubbles: get(options, "bubbles", false),
-            composed: get(options, "composed", false),
-            cancelable: true,
-            detail: arg,
-        }));
-    }
-    /**
-     * 在root上绑定事件
-     * @param evName
-     * @param hook
-     * @returns 函数钩子，用于卸载
-     */
-    on(evName, hook) {
-        if (!this.#rootEvs[evName]) {
-            this.#rootEvs[evName] = [];
-        }
-        let cbk = hook.bind(this);
-        this.#rootEvs[evName].push(cbk);
-        this.addEventListener(evName, cbk);
-        return cbk;
-    }
-    /**
-     * 从root上移除事件
-     * @param evName
-     * @param hook on函数返回的钩子，可选。为空时移除所有evName事件
-     */
-    off(evName, hook) {
-        if (hook) {
-            this.removeEventListener(evName, hook);
-            remove(this.#rootEvs[evName], cbk => cbk === hook);
+        if (has(this.#attrs, 'emit-native')) {
+            this.dispatchEvent(new CustomEvent(evName, {
+                bubbles: false,
+                composed: false,
+                cancelable: true,
+                detail: arg,
+            }));
         }
         else {
-            each(this.#rootEvs[evName], cbk => {
-                this.removeEventListener(evName, cbk);
-            });
-            this.#rootEvs[evName] = [];
-        }
-    }
-    addEvent(node, evName, hook) {
-        if (!this.#nodeEvs[evName]) {
-            this.#nodeEvs[evName] = [];
+            if (this._listerners[evName]) {
+                this._listerners[evName](arg);
+            }
         }
-        let cbk = hook.bind(this);
-        this.#nodeEvs[evName].push([cbk, new WeakRef(node)]);
-        node.addEventListener(evName, cbk);
-        return cbk;
     }
-    removeEvent(node, evName, hook) {
-        if (hook) {
-            node.removeEventListener(evName, hook);
-            remove(this.#nodeEvs[evName], ([cbk]) => cbk === hook);
-        }
-        else {
-            each(this.#nodeEvs[evName], ([cbk]) => {
-                node.removeEventListener(evName, cbk);
-            });
-            this.#nodeEvs[evName] = [];
+    _addEvent(evName, hook) {
+        if (!this._listerners) {
+            this._listerners = {};
         }
+        this._listerners[evName] = hook;
     }
     /**
      * 下一帧执行
@@ -2118,7 +2022,7 @@ class CompElem extends HTMLElement {
      * 强制更新一次视图
      */
     forceUpdate() {
-        each(this.#data, (v, k) => {
+        each(this.__data_, (v, k) => {
             this.#updateSources[k] = {
                 value: undefined,
                 chain: undefined,
@@ -2686,7 +2590,7 @@ const EXP_ATTR_CONVERT = /\s+([\.?@*])?((?:[a-zA-Z]*[A-Z][^\s<>="']+))(?=[\s=>])
 const EXP_ATTR_CHECK = /[.?-a-z]+\s*=\s*(['"])\s*([^='"]*<\!--c_ui-pl_df-->){2,}.*?\1/ims;
 const EXP_PLACEHOLDER = /<\s*[a-z0-9-]+([^>]*<\!--c_ui-pl_df-->)*[^>]*?(?<!-)>/imgs;
 const SLOT_KEY_PROPS = 'slot-props';
-const HTML_TMPL_CACHE = {};
+const HTML_TMPL_CACHE = new Map();
 /**
  * 提供渲染函数相关操作
  * @author holyhigh2
@@ -2764,12 +2668,12 @@ const PLACEHOLDER_EXP = /<!--c_ui-pl_df\d*(-->)?/;
  * 构建模板为DOM结构
  * @param html
  */
-function buildTmplate(updatePoints, html, vars, renderComponent, isDirective = false) {
+function buildTmplate(updatePoints, html, vars, renderComponent) {
     const container = document.createElement("div");
     container.innerHTML = html;
-    let evList = renderComponent._eventList;
+    let evList = renderComponent._eventBindList;
     if (!evList) {
-        evList = renderComponent._eventList = [];
+        evList = renderComponent._eventBindList = [];
     }
     //遍历dom
     const nodeIterator = document.createNodeIterator(container, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
@@ -2977,7 +2881,7 @@ function buildTmplate(updatePoints, html, vars, renderComponent, isDirective = f
                 } //endif
             } //endfor
             if (currentNode instanceof CompElem) {
-                currentNode._regWrapper(renderComponent);
+                setWrapper(currentNode, renderComponent);
                 if (size(props) > 0)
                     currentNode._initProps(props);
             }
@@ -3051,14 +2955,14 @@ function buildTmplate(updatePoints, html, vars, renderComponent, isDirective = f
 function buildView(tmpl, component) {
     let updatePoints = [];
     let nodes;
-    if (HTML_TMPL_CACHE[component.tagName]) {
-        let htmlTmpl = HTML_TMPL_CACHE[component.tagName];
+    if (HTML_TMPL_CACHE.has(component.constructor)) {
+        let htmlTmpl = HTML_TMPL_CACHE.get(component.constructor);
         let vars = buildVars(component, tmpl);
         nodes = buildTmplate(updatePoints, htmlTmpl, vars, component);
     }
     else {
         let [html, vars] = buildHTML(component, tmpl);
-        HTML_TMPL_CACHE[component.tagName] = html;
+        HTML_TMPL_CACHE.set(component.constructor, html);
         nodes = buildTmplate(updatePoints, html, vars, component);
     }
     component.__updateTree = updatePoints;
@@ -3067,7 +2971,7 @@ function buildView(tmpl, component) {
 function buildSubView(pointNode, tmpl, component, po, bindEvent = false) {
     let [html, vars] = buildHTML(component, tmpl);
     let updatePoints = [];
-    let nodes = buildTmplate(updatePoints, html, vars, component, true);
+    let nodes = buildTmplate(updatePoints, html, vars, component);
     if (bindEvent)
         component.__bindEvents();
     updatePoints.forEach(up => {
@@ -3192,14 +3096,6 @@ function updateSubScopeView(subScopeUpdatePoint, renderComponent, tmpl, changedK
 function html(strings, ...vars) {
     return new Template(isString(strings) ? [strings] : strings, vars);
 }
-/**
- * 标签函数，用于构建样式
- * @param strings
- * @param vars
- */
-function css(strings, ...vars) {
-    return new CssTemplate(isString(strings) ? [strings] : strings, vars);
-}
 const EXP_STR = /([a-z0-9"'])\s*>\s*</img;
 class RefObject {
     #ref;
@@ -3218,6 +3114,9 @@ class RefObject {
 function createRef() {
     return new RefObject();
 }
+function setWrapper(target, wrapperComponent) {
+    target.__wrapperComponent = new WeakRef(wrapperComponent);
+}
 
 //装饰器类型
 var DecoratorType;
@@ -3316,12 +3215,12 @@ function decorator(decoClass) {
     let fn = (...args) => {
         return (...metadata) => {
             let ctor = metadata[0].constructor;
-            let ary = DefinitionDecoratorMap.get(ctor.name); //  ctor[_DecoratorsKey]
-            if (!DefinitionDecoratorMap.has(ctor.name)) {
+            let ary = DefinitionDecoratorMap.get(ctor); //  ctor[_DecoratorsKey]
+            if (!DefinitionDecoratorMap.has(ctor)) {
                 //继承父类
                 let proto = Object.getPrototypeOf(ctor);
-                ary = proto ? concat(DefinitionDecoratorMap.get(proto.name) ?? []) : [];
-                DefinitionDecoratorMap.set(ctor.name, ary);
+                ary = proto ? concat(DefinitionDecoratorMap.get(proto) ?? []) : [];
+                DefinitionDecoratorMap.set(ctor, ary);
             }
             let dw = new DecoratorWrapper(args, metadata.splice(1), decoClass);
             ary?.push(dw);
@@ -3335,12 +3234,12 @@ function decoratorWithNoArgs(decoClass) {
         if (!metadata || metadata.length < 1)
             return;
         let ctor = metadata[0].constructor;
-        let ary = DefinitionDecoratorMap.get(ctor.name); //  ctor[_DecoratorsKey]
-        if (!DefinitionDecoratorMap.has(ctor.name)) {
+        let ary = DefinitionDecoratorMap.get(ctor); //  ctor[_DecoratorsKey]
+        if (!DefinitionDecoratorMap.has(ctor)) {
             //继承父类
             let proto = Object.getPrototypeOf(ctor);
-            ary = proto ? concat(DefinitionDecoratorMap.get(proto.name) ?? []) : [];
-            DefinitionDecoratorMap.set(ctor.name, ary);
+            ary = proto ? concat(DefinitionDecoratorMap.get(proto) ?? []) : [];
+            DefinitionDecoratorMap.set(ctor, ary);
         }
         let dw = new DecoratorWrapper([], metadata.splice(1), decoClass);
         ary?.push(dw);
@@ -3353,10 +3252,22 @@ function computed(target, propertyKey, descriptor) {
     if (!descriptor.get) {
         showError(`Computed '${propertyKey}' must be a getter`);
     }
-    if (!DefinitionComputedMap.has(target.constructor.name)) {
-        DefinitionComputedMap.set(target.constructor.name, {});
+    if (!DefinitionComputedMap.has(target.constructor)) {
+        DefinitionComputedMap.set(target.constructor, {});
     }
-    DefinitionComputedMap.get(target.constructor.name)[propertyKey] = descriptor.get;
+    DefinitionComputedMap.get(target.constructor)[propertyKey] = descriptor.get;
+    //getter
+    delete target[propertyKey];
+    Reflect.defineProperty(target, propertyKey, {
+        get() {
+            if (Collector.__collecting) {
+                Collector.__varPathList.push(propertyKey);
+            }
+            let v = Reflect.get(this[DATA_KEY], propertyKey);
+            return v;
+        }
+    });
+    return Reflect.getOwnPropertyDescriptor(target, propertyKey);
 }
 
 /**
@@ -3401,15 +3312,15 @@ const debounced = decorator(DebouncedDecorator);
  */
 function event(eventName, eventTarget) {
     return (target, name, descriptor) => {
-        if (!DefinitionCompEventMap.has(target.constructor.name)) {
+        if (!DefinitionCompEventMap.has(target.constructor)) {
             let mixinEvents = [];
             let parentCtor = target.constructor;
             while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-                mixinEvents = concat(mixinEvents, DefinitionCompEventMap.get(parentCtor.name) ?? []);
+                mixinEvents = concat(mixinEvents, DefinitionCompEventMap.get(parentCtor) ?? []);
             }
-            DefinitionCompEventMap.set(target.constructor.name, mixinEvents);
+            DefinitionCompEventMap.set(target.constructor, mixinEvents);
         }
-        DefinitionCompEventMap.get(target.constructor.name)?.push({ name: eventName, targetFn: eventTarget, fnName: name });
+        DefinitionCompEventMap.get(target.constructor)?.push({ name: eventName, targetFn: eventTarget, fnName: name });
     };
 }
 
@@ -3527,16 +3438,42 @@ function state(options) {
     defineState(target, stateKey, { prop: "" });
 }
 function defineState(target, stateKey, options) {
-    if (!DefinitionStateMap.has(target.constructor.name)) {
+    if (!DefinitionStateMap.has(target.constructor)) {
         const mixinStates = {};
         let parentCtor = target.constructor;
         while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-            merge(mixinStates, DefinitionStateMap.get(parentCtor.name) ?? {});
+            merge(mixinStates, DefinitionStateMap.get(parentCtor) ?? {});
         }
-        DefinitionStateMap.set(target.constructor.name, mixinStates);
+        DefinitionStateMap.set(target.constructor, mixinStates);
     }
     options.shallow = options.shallow || false;
-    set(DefinitionStateMap.get(target.constructor.name), stateKey, options);
+    set(DefinitionStateMap.get(target.constructor), stateKey, options);
+    //cache tags
+    if (options.hasChanged) {
+        let changeMap = HasChangedPropOrStateMap.get(target.constructor);
+        if (!changeMap) {
+            changeMap = new Map();
+            HasChangedPropOrStateMap.set(target.constructor, changeMap);
+        }
+        changeMap.set(stateKey, options.hasChanged);
+    }
+    if (options.shallow) {
+        let keySet = StateShallowKeySetMap.get(target.constructor);
+        if (!keySet) {
+            keySet = new Set();
+            StateShallowKeySetMap.set(target.constructor, keySet);
+        }
+        keySet.add(stateKey);
+    }
+    //setters & getters
+    Reflect.defineProperty(target.constructor.prototype, stateKey, {
+        get() {
+            return getterValue(undefined, stateKey, this);
+        },
+        set(v) {
+            setterValue(stateKey, v, this);
+        },
+    });
 }
 /**
  * 同@state装饰器，但可用于构造器中调用
@@ -3601,27 +3538,67 @@ const throttled = decorator(ThrottledDecorator);
  */
 function watch(source, options) {
     return (target, name) => {
-        if (!DefinitionWatchMap.has(target.constructor.name)) {
-            const watchMap = {};
-            let parentCtor = target.constructor;
-            while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-                if (DefinitionWatchMap.has(parentCtor.name)) {
-                    let parentMap = DefinitionWatchMap.get(parentCtor.name);
-                    each(parentMap, (list, k) => {
-                        watchMap[k] = list;
+        let watchDeepUpdateMap = WatchDeepUpdateMap.get(target.constructor);
+        let watchUpdateMap = WatchUpdateMap.get(target.constructor);
+        let onceMap = WatchKeysOnceMap.get(target.constructor);
+        let watchKeysDeep = WatchKeysDeepListMap.get(target.constructor);
+        let watchKeys = WatchKeysListMap.get(target.constructor);
+        let watchImmediateList = WatchImmediateListMap.get(target.constructor);
+        if (!watchKeys) {
+            watchKeys = [];
+            WatchKeysListMap.set(target.constructor, watchKeys);
+            watchKeysDeep = [];
+            WatchKeysDeepListMap.set(target.constructor, watchKeysDeep);
+            onceMap = new Map();
+            WatchKeysOnceMap.set(target.constructor, onceMap);
+            watchDeepUpdateMap = {};
+            WatchDeepUpdateMap.set(target.constructor, watchDeepUpdateMap);
+            watchUpdateMap = {};
+            WatchUpdateMap.set(target.constructor, watchUpdateMap);
+            watchImmediateList = {};
+            WatchImmediateListMap.set(target.constructor, watchImmediateList);
+            let parentCtor = _getSuper(target.constructor);
+            while (parentCtor) {
+                if (WatchKeysListMap.has(parentCtor)) {
+                    watchKeys.push(...WatchKeysListMap.get(parentCtor));
+                    watchKeysDeep.push(...WatchKeysDeepListMap.get(parentCtor));
+                    WatchKeysOnceMap.get(parentCtor)?.forEach((v, k) => {
+                        onceMap.set(k, v);
                     });
+                    assign(watchDeepUpdateMap, WatchDeepUpdateMap.get(parentCtor));
+                    assign(watchUpdateMap, WatchUpdateMap.get(parentCtor));
+                    assign(watchImmediateList, WatchImmediateListMap.get(parentCtor));
                 }
+                parentCtor = _getSuper(parentCtor);
             }
-            DefinitionWatchMap.set(target.constructor.name, watchMap);
         }
         const sources = isArray(source) ? source : [source];
         sources.forEach(src => {
-            let srcList = DefinitionWatchMap.get(target.constructor.name)[src];
-            if (!isArray(srcList)) {
-                srcList = [];
-                DefinitionWatchMap.get(target.constructor.name)[src] = srcList;
+            let handler = target[name];
+            //////////////////////////////
+            let onceWatch = get(options, "once", false);
+            if (onceWatch) {
+                onceMap.set(src, false);
+            }
+            let deep = get(options, "deep", false);
+            watchKeys.push(src);
+            if (deep) {
+                watchDeepUpdateMap[src] = watchDeepUpdateMap[src] ?? new Set();
+                watchDeepUpdateMap[src].add(handler);
+                watchKeysDeep.push(src);
+            }
+            else {
+                watchUpdateMap[src] = watchUpdateMap[src] ?? new Set();
+                watchUpdateMap[src].add(handler);
+            }
+            let immediate = get(options, "immediate", false);
+            if (immediate) {
+                let handlerSet = watchImmediateList[src];
+                if (!handlerSet) {
+                    handlerSet = watchImmediateList[src] = new Set();
+                }
+                handlerSet.add(handler);
             }
-            srcList.push({ source: src, options, handler: target[name] });
         });
     };
 }
@@ -3644,7 +3621,7 @@ const bind = directive(function Bind(obj) {
             //判断是否prop
             let props = {};
             let attrs = {};
-            let propDefs = DefinitionPropMap.get(el.constructor.name);
+            let propDefs = DefinitionPropMap.get(el.constructor);
             each(obj, (v, k) => {
                 if (Ignores.includes(k))
                     return;
@@ -3944,13 +3921,13 @@ const model = directive(function Model(modelValue, updateProp = 'value', modelPr
         if (!(rootPath in renderComponent) && !renderComponent._wrapperProp[rootPath]) {
             showError(`model - property '${rootPath}' is not defined on the instance of ` + renderComponent.tagName);
         }
-        let evList = renderComponent._eventList;
+        let evList = renderComponent._eventBindList;
         if (!isObject(modelValue) && !trim(modelValue))
             modelValue = '';
         if (node instanceof CompElem) {
             node._initProps({ [updateProp]: modelValue });
             let evName = 'update:' + updateProp;
-            evList.push([evName, function (e) {
+            evList.push([evName, function (obj) {
                     console.debug('Model =>', path);
                     let ctx = this;
                     let pathFromWrapperComponent = ctx._wrapperProp[rootPath];
@@ -3958,7 +3935,7 @@ const model = directive(function Model(modelValue, updateProp = 'value', modelPr
                     if (!hasPath && pathFromWrapperComponent && get(ctx.wrapperComponent, rootPath) === get(ctx, pathFromWrapperComponent)) {
                         ctx = ctx.wrapperComponent || ctx;
                     }
-                    set(ctx, path, e.detail.value);
+                    set(ctx, path, obj.value);
                 }, node]);
         }
         else if (node instanceof HTMLTextAreaElement) {
@@ -4178,4 +4155,4 @@ const when = directive(function When(value, cases) {
     };
 }, [EnterPointType.TEXT, EnterPointType.SLOT]);
 
-export { CompElem, CssHelper, CssTemplate, DI_COMMENT_START_NODE_MAP, Decorator, DecoratorType, DecoratorWrapper, DirectiveUpdateTag, DomUtil, EnterPointType, ModelTriggerType, QueryCache, Template, TextOrSlotDirectiveExecutorMap, UpdatePoint, _getObservedAttrs, _getSuper, _toUpdatePath, bind, buildHTML, classes, computed, createRef, css, debounced, decorator, decoratorWithNoArgs, directive, event, forEach, getBooleanValue, getSlotComponent, html, htmlC, htmlD, ifElse, ifTrue, isBooleanProp, makeState, model, onced, prop, query, queryAll, show, showError, showTagError, showTagWarn, showWarn, slot, state, styles, sync, tag, throttled, updateDirective, watch, when };
+export { CompElem, CssHelper, DI_COMMENT_START_NODE_MAP, Decorator, DecoratorType, DecoratorWrapper, DirectiveUpdateTag, DomUtil, EnterPointType, ModelTriggerType, QueryCache, Template, TextOrSlotDirectiveExecutorMap, UpdatePoint, _getObservedAttrs, _getSuper, _toUpdatePath, bind, buildHTML, classes, computed, createRef, debounced, decorator, decoratorWithNoArgs, directive, event, forEach, getBooleanValue, getSlotComponent, html, htmlC, htmlD, ifElse, ifTrue, isBooleanProp, makeState, model, onced, prop, query, queryAll, show, showError, showTagError, showTagWarn, showWarn, slot, state, styles, sync, tag, throttled, updateDirective, watch, when };