@mulsense/xnew 0.1.0 → 0.1.2

package/dist/xnew.mjs

@@ -102,56 +102,42 @@ class Timer {
     }
 }
 
-//----------------------------------------------------------------------------------------------------
-// map ex
-//----------------------------------------------------------------------------------------------------
-class MapEx {
-    constructor() {
-        this.map = new Map;
-    }
-    get size() {
-        return this.map.size;
-    }
-    forEach(callback) {
-        this.map.forEach(callback);
-    }
-    clear() {
-        this.map.clear();
-    }
-}
 //----------------------------------------------------------------------------------------------------
 // map set
 //----------------------------------------------------------------------------------------------------
-class MapSet extends MapEx {
+class MapSet extends Map {
     has(key, value) {
         var _a, _b;
         if (value === undefined) {
-            return this.map.has(key);
+            return super.has(key);
         }
         else {
-            return (_b = (_a = this.map.get(key)) === null || _a === void 0 ? void 0 : _a.has(value)) !== null && _b !== void 0 ? _b : false;
+            return (_b = (_a = super.get(key)) === null || _a === void 0 ? void 0 : _a.has(value)) !== null && _b !== void 0 ? _b : false;
         }
     }
-    get(key) {
-        return this.map.get(key);
-    }
-    keys() {
-        return this.map.keys();
-    }
     add(key, value) {
         var _a;
-        this.map.set(key, ((_a = this.map.get(key)) !== null && _a !== void 0 ? _a : new Set).add(value));
+        super.set(key, ((_a = super.get(key)) !== null && _a !== void 0 ? _a : new Set).add(value));
         return this;
     }
+    keys(key) {
+        var _a, _b;
+        if (key === undefined) {
+            return super.keys();
+        }
+        else {
+            return (_b = (_a = super.get(key)) === null || _a === void 0 ? void 0 : _a.values()) !== null && _b !== void 0 ? _b : [].values();
+        }
+    }
     delete(key, value) {
         var _a, _b, _c, _d;
         let ret = false;
         if (value === undefined) {
-            ret = (((_a = this.map.get(key)) === null || _a === void 0 ? void 0 : _a.size) === 0) ? this.map.delete(key) : false;
+            ret = (((_a = super.get(key)) === null || _a === void 0 ? void 0 : _a.size) === 0) ? super.delete(key) : false;
         }
         else {
-            ret = (_c = (_b = this.map.get(key)) === null || _b === void 0 ? void 0 : _b.delete(value)) !== null && _c !== void 0 ? _c : false;
-            (((_d = this.map.get(key)) === null || _d === void 0 ? void 0 : _d.size) === 0) && this.map.delete(key);
+            ret = (_c = (_b = super.get(key)) === null || _b === void 0 ? void 0 : _b.delete(value)) !== null && _c !== void 0 ? _c : false;
+            (((_d = super.get(key)) === null || _d === void 0 ? void 0 : _d.size) === 0) && super.delete(key);
         }
         return ret;
     }
@@ -159,130 +145,70 @@ class MapSet extends MapEx {
 //----------------------------------------------------------------------------------------------------
 // map map
 //----------------------------------------------------------------------------------------------------
-class MapMap extends MapEx {
+class MapMap extends Map {
     has(key1, key2) {
         var _a, _b;
         if (key2 === undefined) {
-            return this.map.has(key1);
+            return super.has(key1);
         }
         else {
-            return (_b = (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.has(key2)) !== null && _b !== void 0 ? _b : false;
+            return (_b = (_a = super.get(key1)) === null || _a === void 0 ? void 0 : _a.has(key2)) !== null && _b !== void 0 ? _b : false;
         }
     }
-    set(key1, key2, value) {
+    set(key1, key2OrValue, value) {
         var _a;
-        this.map.set(key1, ((_a = this.map.get(key1)) !== null && _a !== void 0 ? _a : new Map).set(key2, value));
+        if (value === undefined) {
+            // 2 args: directly set Map<Key2, Value>
+            super.set(key1, key2OrValue);
+        }
+        else {
+            // 3 args: set nested value
+            super.set(key1, ((_a = super.get(key1)) !== null && _a !== void 0 ? _a : new Map).set(key2OrValue, value));
+        }
         return this;
     }
     get(key1, key2) {
         var _a;
         if (key2 === undefined) {
-            return this.map.get(key1);
+            return super.get(key1);
         }
         else {
-            return (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.get(key2);
+            return (_a = super.get(key1)) === null || _a === void 0 ? void 0 : _a.get(key2);
         }
     }
     keys(key1) {
         var _a, _b;
         if (key1 === undefined) {
-            return this.map.keys();
+            return super.keys();
         }
         else {
-            return (_b = (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.keys()) !== null && _b !== void 0 ? _b : (function* () { })();
+            return (_b = (_a = super.get(key1)) === null || _a === void 0 ? void 0 : _a.keys()) !== null && _b !== void 0 ? _b : [].values();
         }
     }
     delete(key1, key2) {
         var _a, _b, _c, _d;
         let ret = false;
         if (key2 === undefined) {
-            ret = (((_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.size) === 0) ? this.map.delete(key1) : false;
-        }
-        else {
-            ret = (_c = (_b = this.map.get(key1)) === null || _b === void 0 ? void 0 : _b.delete(key2)) !== null && _c !== void 0 ? _c : false;
-            (((_d = this.map.get(key1)) === null || _d === void 0 ? void 0 : _d.size) === 0) && this.map.delete(key1);
-        }
-        return ret;
-    }
-}
-//----------------------------------------------------------------------------------------------------
-// map map map
-//----------------------------------------------------------------------------------------------------
-class MapMapMap extends MapEx {
-    has(key1, key2, key3) {
-        var _a, _b;
-        if (key2 === undefined) {
-            return this.map.has(key1);
-        }
-        else {
-            return (_b = (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.has(key2, key3)) !== null && _b !== void 0 ? _b : false;
-        }
-    }
-    set(key1, key2, key3, value) {
-        var _a;
-        this.map.set(key1, ((_a = this.map.get(key1)) !== null && _a !== void 0 ? _a : new MapMap).set(key2, key3, value));
-        return this;
-    }
-    get(key1, key2, key3) {
-        var _a, _b;
-        if (key2 === undefined) {
-            return this.map.get(key1);
-        }
-        else if (key3 === undefined) {
-            return (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.get(key2);
-        }
-        else {
-            return (_b = this.map.get(key1)) === null || _b === void 0 ? void 0 : _b.get(key2, key3);
-        }
-    }
-    keys(key1, key2) {
-        var _a, _b, _c, _d, _e;
-        if (key1 === undefined) {
-            return this.map.keys();
-        }
-        else if (key2 === undefined) {
-            return (_b = (_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.keys()) !== null && _b !== void 0 ? _b : (function* () { })();
-        }
-        else {
-            return (_e = (_d = (_c = this.map.get(key1)) === null || _c === void 0 ? void 0 : _c.get(key2)) === null || _d === void 0 ? void 0 : _d.keys()) !== null && _e !== void 0 ? _e : (function* () { })();
-        }
-    }
-    delete(key1, key2, key3) {
-        var _a, _b, _c, _d;
-        let ret = false;
-        if (key2 === undefined) {
-            ret = (((_a = this.map.get(key1)) === null || _a === void 0 ? void 0 : _a.size) === 0) ? this.map.delete(key1) : false;
+            ret = (((_a = super.get(key1)) === null || _a === void 0 ? void 0 : _a.size) === 0) ? super.delete(key1) : false;
         }
         else {
-            ret = (_c = (_b = this.map.get(key1)) === null || _b === void 0 ? void 0 : _b.delete(key2, key3)) !== null && _c !== void 0 ? _c : false;
-            (((_d = this.map.get(key1)) === null || _d === void 0 ? void 0 : _d.size) === 0) && this.map.delete(key1);
+            ret = (_c = (_b = super.get(key1)) === null || _b === void 0 ? void 0 : _b.delete(key2)) !== null && _c !== void 0 ? _c : false;
+            (((_d = super.get(key1)) === null || _d === void 0 ? void 0 : _d.size) === 0) && super.delete(key1);
         }
         return ret;
     }
 }
 
 //----------------------------------------------------------------------------------------------------
-// Constants
+// Definitions
 //----------------------------------------------------------------------------------------------------
-const LIFECYCLE_EVENTS = ['start', 'update', 'stop', 'finalize'];
-const LIFECYCLE_STATES = {
-    INVOKED: 'invoked',
-    INITIALIZED: 'initialized',
-    STARTED: 'started',
-    STOPPED: 'stopped',
-    PRE_FINALIZED: 'pre finalized',
-    FINALIZED: 'finalized',
-};
-const CUSTOM_EVENT_PREFIX = {
-    GLOBAL: '+',
-    INTERNAL: '-',
-};
+const SYSTEM_EVENTS = ['start', 'update', 'stop', 'finalize'];
 //----------------------------------------------------------------------------------------------------
-// unit main
+// Unit
 //----------------------------------------------------------------------------------------------------
 class Unit {
     constructor(target, component, props) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         const parent = UnitScope.current;
         let baseElement;
         if (target instanceof HTMLElement || target instanceof SVGElement) {
@@ -292,27 +218,28 @@ class Unit {
             baseElement = (_a = parent._.currentElement) !== null && _a !== void 0 ? _a : parent._.baseElement;
         }
         else {
-            baseElement = (_c = (_b = document.currentScript) === null || _b === void 0 ? void 0 : _b.parentElement) !== null && _c !== void 0 ? _c : document.body;
+            baseElement = document.body;
         }
-        let baseComponent = null;
+        let baseComponent;
         if (typeof component === 'function') {
             baseComponent = component;
         }
         else if (typeof component === 'string') {
             baseComponent = (self) => { self.element.textContent = component; };
         }
+        else {
+            baseComponent = (self) => { };
+        }
         this._ = {
-            root: (_d = parent === null || parent === void 0 ? void 0 : parent._.root) !== null && _d !== void 0 ? _d : this,
             parent,
             target,
+            baseContext: (_b = UnitScope.contexts.get(parent)) !== null && _b !== void 0 ? _b : null,
+            baseElement,
             baseComponent,
             props,
-            baseElement,
-            nextNest: { element: baseElement, position: 'beforeend' },
-            baseContext: UnitScope.get(parent),
         };
-        ((_e = parent === null || parent === void 0 ? void 0 : parent._.children) !== null && _e !== void 0 ? _e : Unit.roots).push(this);
-        Unit.initialize(this);
+        ((_c = parent === null || parent === void 0 ? void 0 : parent._.children) !== null && _c !== void 0 ? _c : Unit.roots).push(this);
+        Unit.initialize(this, { element: baseElement, position: 'beforeend' });
     }
     get element() {
         return this._.currentElement;
@@ -336,80 +263,32 @@ class Unit {
     }
     reboot() {
         Unit.stop(this);
-        let trace = this._.currentElement;
-        while (trace.parentElement && trace.parentElement !== this._.baseElement) {
-            trace = trace.parentElement;
+        let first = this._.currentElement;
+        while (first.parentElement && first.parentElement !== this._.baseElement) {
+            first = first.parentElement;
         }
-        if (trace.parentElement === this._.baseElement) {
-            this._.nextNest.element = trace.nextElementSibling;
-            this._.nextNest.position = 'beforebegin';
+        let nextNest;
+        if (first.parentElement === this._.baseElement && first.nextElementSibling) {
+            nextNest = { element: first.nextElementSibling, position: 'beforebegin' };
         }
-        Unit.finalize(this);
-        Unit.initialize(this);
-    }
-    get components() {
-        return this._.components;
-    }
-    on(type, listener, options) {
-        try {
-            if (typeof type === 'string') {
-                const filtered = type.trim().split(/\s+/).filter((type) => LIFECYCLE_EVENTS.includes(type));
-                filtered.forEach((type) => {
-                    this._.system[type].push(listener);
-                });
-            }
-            UnitEvent.on(this, type, listener, options);
-        }
-        catch (error) {
-            console.error('unit.on(type, listener, option?): ', error);
-        }
-        return this;
-    }
-    off(type, listener) {
-        try {
-            if (type === undefined) {
-                this._.system = { start: [], update: [], stop: [], finalize: [] };
-            }
-            else if (typeof type === 'string') {
-                const filtered = type.trim().split(/\s+/).filter((type) => LIFECYCLE_EVENTS.includes(type));
-                filtered.forEach((type) => {
-                    if (listener === undefined) {
-                        this._.system[type] = [];
-                    }
-                    else {
-                        this._.system[type] = this._.system[type].filter((l) => l !== listener);
-                    }
-                });
-            }
-            UnitEvent.off(this, type, listener);
-        }
-        catch (error) {
-            console.error('unit.off(type, listener): ', error);
-        }
-        return this;
-    }
-    emit(type, ...args) {
-        try {
-            UnitEvent.emit(this, type, ...args);
-        }
-        catch (error) {
-            console.error('unit.emit(type, ...args): ', error);
+        else {
+            nextNest = { element: this._.baseElement, position: 'beforeend' };
         }
+        Unit.finalize(this);
+        Unit.initialize(this, nextNest);
     }
-    //----------------------------------------------------------------------------------------------------
-    // internal
-    //----------------------------------------------------------------------------------------------------
-    static initialize(unit) {
+    static initialize(unit, nextNest) {
         var _a;
         unit._ = Object.assign(unit._, {
+            nextNest,
             children: [],
-            components: [],
+            components: new Set(),
+            listeners: new MapMap(),
+            sublisteners: new MapMap(),
             captures: [],
-            state: LIFECYCLE_STATES.INVOKED,
+            state: 'invoked',
             tostart: true,
             currentElement: unit._.baseElement,
-            upcount: 0,
-            resolved: false,
             defines: {},
             system: { start: [], update: [], stop: [], finalize: [] },
         });
@@ -423,12 +302,10 @@ class Unit {
             UnitScope.execute({ unit, context: null, element: null }, () => Unit.extend(unit, unit._.baseComponent, unit._.props));
         }
         // whether the unit promise was resolved
-        (_a = UnitPromise.get(unit)) === null || _a === void 0 ? void 0 : _a.then(() => {
-            unit._.resolved = true;
-        });
-        unit._.state = LIFECYCLE_STATES.INITIALIZED;
+        (_a = UnitPromise.get(unit)) === null || _a === void 0 ? void 0 : _a.then(() => unit._.state = 'initialized');
+        // setup capture
         let current = unit;
-        while (current !== null) {
+        while (1) {
             let captured = false;
             for (const capture of current._.captures) {
                 if (capture.checker(unit)) {
@@ -436,7 +313,7 @@ class Unit {
                     captured = true;
                 }
             }
-            if (captured === false) {
+            if (captured === false && current._.parent !== null) {
                 current = current._.parent;
             }
             else {
@@ -445,16 +322,18 @@ class Unit {
         }
     }
     static finalize(unit) {
-        if (unit._.state !== LIFECYCLE_STATES.FINALIZED && unit._.state !== LIFECYCLE_STATES.PRE_FINALIZED) {
-            unit._.state = LIFECYCLE_STATES.PRE_FINALIZED;
+        if (unit._.state !== 'finalized' && unit._.state !== 'pre-finalized') {
+            unit._.state = 'pre-finalized';
             unit._.children.forEach((child) => child.finalize());
             unit._.system.finalize.forEach((listener) => {
                 UnitScope.execute(UnitScope.snapshot(unit), listener);
             });
-            UnitEvent.off(unit);
-            UnitEvent.suboff(unit, null);
+            unit.off();
+            Unit.suboff(unit, null);
+            unit._.components.forEach((component) => {
+                Unit.componentUnits.delete(component, unit);
+            });
             UnitScope.finalize(unit);
-            UnitComponent.finalize(unit);
             UnitPromise.finalize(unit);
             while (unit._.currentElement !== unit._.baseElement && unit._.currentElement.parentElement !== null) {
                 const parent = unit._.currentElement.parentElement;
@@ -463,12 +342,12 @@ class Unit {
             }
             // reset defines
             Object.keys(unit._.defines).forEach((key) => {
-                if (!LIFECYCLE_EVENTS.includes(key)) {
+                if (SYSTEM_EVENTS.includes(key) === false) {
                     delete unit[key];
                 }
             });
             unit._.defines = {};
-            unit._.state = LIFECYCLE_STATES.FINALIZED;
+            unit._.state = 'finalized';
         }
     }
     static nest(unit, tag) {
@@ -490,51 +369,49 @@ class Unit {
     }
     static extend(unit, component, props) {
         var _a;
-        unit._.components.push(component);
-        UnitComponent.add(unit, component);
+        unit._.components.add(component);
+        Unit.componentUnits.add(component, unit);
         const defines = (_a = component(unit, props)) !== null && _a !== void 0 ? _a : {};
-        const snapshot = UnitScope.snapshot(unit);
         Object.keys(defines).forEach((key) => {
-            const descriptor = Object.getOwnPropertyDescriptor(defines, key);
             if (unit[key] !== undefined && unit._.defines[key] === undefined) {
                 throw new Error(`The property "${key}" already exists.`);
             }
-            const newDescriptor = { configurable: true, enumerable: true };
+            const descriptor = Object.getOwnPropertyDescriptor(defines, key);
+            const wrappedDesc = { configurable: true, enumerable: true };
             if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get) {
-                newDescriptor.get = (...args) => UnitScope.execute(snapshot, descriptor.get, ...args);
+                wrappedDesc.get = UnitScope.wrap(descriptor.get);
             }
             if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set) {
-                newDescriptor.set = (...args) => UnitScope.execute(snapshot, descriptor.set, ...args);
+                wrappedDesc.set = UnitScope.wrap(descriptor.set);
             }
             if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
-                newDescriptor.value = (...args) => UnitScope.execute(snapshot, descriptor.value, ...args);
+                wrappedDesc.value = UnitScope.wrap(descriptor.value);
             }
             else if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) !== undefined) {
-                newDescriptor.writable = true;
-                newDescriptor.value = descriptor.value;
+                wrappedDesc.writable = true;
+                wrappedDesc.value = descriptor.value;
             }
-            Object.defineProperty(unit._.defines, key, newDescriptor);
-            Object.defineProperty(unit, key, newDescriptor);
+            Object.defineProperty(unit._.defines, key, wrappedDesc);
+            Object.defineProperty(unit, key, wrappedDesc);
         });
     }
     static start(unit, time) {
-        if (!unit._.resolved || !unit._.tostart)
+        if (unit._.tostart === false)
             return;
-        const { state } = unit._;
-        if (state === LIFECYCLE_STATES.INVOKED || state === LIFECYCLE_STATES.INITIALIZED || state === LIFECYCLE_STATES.STOPPED) {
-            unit._.state = LIFECYCLE_STATES.STARTED;
+        if (unit._.state === 'initialized' || unit._.state === 'stopped') {
+            unit._.state = 'started';
             unit._.children.forEach((child) => Unit.start(child, time));
             unit._.system.start.forEach((listener) => {
                 UnitScope.execute(UnitScope.snapshot(unit), listener);
             });
         }
-        else if (state === LIFECYCLE_STATES.STARTED) {
+        else if (unit._.state === 'started') {
             unit._.children.forEach((child) => Unit.start(child, time));
         }
     }
     static stop(unit) {
-        if (unit._.state === LIFECYCLE_STATES.STARTED) {
-            unit._.state = LIFECYCLE_STATES.STOPPED;
+        if (unit._.state === 'started') {
+            unit._.state = 'stopped';
             unit._.children.forEach((child) => Unit.stop(child));
             unit._.system.stop.forEach((listener) => {
                 UnitScope.execute(UnitScope.snapshot(unit), listener);
@@ -542,14 +419,11 @@ class Unit {
         }
     }
     static update(unit, time) {
-        if (unit._.state === LIFECYCLE_STATES.STARTED) {
+        if (unit._.state === 'started') {
             unit._.children.forEach((child) => Unit.update(child, time));
-            if (unit._.state === LIFECYCLE_STATES.STARTED) {
-                unit._.system.update.forEach((listener) => {
-                    UnitScope.execute(UnitScope.snapshot(unit), listener, unit._.upcount);
-                });
-                unit._.upcount++;
-            }
+            unit._.system.update.forEach((listener) => {
+                UnitScope.execute(UnitScope.snapshot(unit), listener);
+            });
         }
     }
     static ticker(time) {
@@ -564,8 +438,99 @@ class Unit {
         Ticker.clear(Unit.ticker);
         Ticker.set(Unit.ticker);
     }
+    get components() {
+        return this._.components;
+    }
+    static find(component) {
+        var _a;
+        return [...((_a = Unit.componentUnits.get(component)) !== null && _a !== void 0 ? _a : [])];
+    }
+    on(type, listener, options) {
+        if (this._.state === 'finalized')
+            return;
+        type.trim().split(/\s+/).forEach((type) => {
+            if (SYSTEM_EVENTS.includes(type)) {
+                this._.system[type].push(listener);
+            }
+            if (this._.listeners.has(type, listener) === false) {
+                const execute = UnitScope.wrap(listener);
+                this._.listeners.set(type, listener, [this.element, execute]);
+                Unit.typeUnits.add(type, this);
+                if (/^[A-Za-z]/.test(type)) {
+                    this.element.addEventListener(type, execute, options);
+                }
+            }
+        });
+    }
+    off(type, listener) {
+        const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...this._.listeners.keys()];
+        types.forEach((type) => {
+            if (SYSTEM_EVENTS.includes(type)) {
+                this._.system[type] = this._.system[type].filter((lis) => listener ? lis !== listener : false);
+            }
+            (listener ? [listener] : [...this._.listeners.keys(type)]).forEach((lis) => {
+                const tuple = this._.listeners.get(type, lis);
+                if (tuple !== undefined) {
+                    const [target, execute] = tuple;
+                    this._.listeners.delete(type, lis);
+                    if (/^[A-Za-z]/.test(type)) {
+                        target.removeEventListener(type, execute);
+                    }
+                }
+            });
+            if (this._.listeners.has(type) === false) {
+                Unit.typeUnits.delete(type, this);
+            }
+        });
+    }
+    emit(type, ...args) {
+        var _a, _b;
+        if (this._.state === 'finalized')
+            return;
+        if (type[0] === '+') {
+            (_a = Unit.typeUnits.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
+                var _a;
+                (_a = unit._.listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach(([_, execute]) => execute(...args));
+            });
+        }
+        else if (type[0] === '-') {
+            (_b = this._.listeners.get(type)) === null || _b === void 0 ? void 0 : _b.forEach(([_, execute]) => execute(...args));
+        }
+    }
+    static subon(unit, target, type, listener, options) {
+        type.trim().split(/\s+/).forEach((type) => {
+            if (unit._.sublisteners.has(type, listener) === false) {
+                const execute = UnitScope.wrap(listener);
+                unit._.sublisteners.set(type, listener, [target, execute]);
+                target.addEventListener(type, execute, options);
+            }
+        });
+    }
+    static suboff(unit, target, type, listener) {
+        const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...unit._.sublisteners.keys()];
+        types.forEach((type) => {
+            (listener ? [listener] : [...unit._.sublisteners.keys(type)]).forEach((lis) => {
+                const tuple = unit._.sublisteners.get(type, lis);
+                if (tuple !== undefined) {
+                    const [element, execute] = tuple;
+                    if (target === null || target === element) {
+                        unit._.sublisteners.delete(type, lis);
+                        element.removeEventListener(type, execute);
+                    }
+                }
+            });
+        });
+    }
 }
 Unit.roots = [];
+//----------------------------------------------------------------------------------------------------
+// component
+//----------------------------------------------------------------------------------------------------
+Unit.componentUnits = new MapSet();
+//----------------------------------------------------------------------------------------------------
+// event
+//----------------------------------------------------------------------------------------------------
+Unit.typeUnits = new MapSet();
 Unit.reset();
 //----------------------------------------------------------------------------------------------------
 // unit scope
@@ -579,15 +544,13 @@ class UnitScope {
     static finalize(unit) {
         UnitScope.contexts.delete(unit);
     }
-    static set(unit, context) {
-        UnitScope.contexts.set(unit, context);
-    }
-    static get(unit) {
-        var _a;
-        return (_a = UnitScope.contexts.get(unit)) !== null && _a !== void 0 ? _a : null;
+    static wrap(listener) {
+        const snapshot = UnitScope.snapshot();
+        return (...args) => UnitScope.execute(snapshot, listener, ...args);
     }
     static execute(snapshot, func, ...args) {
-        if (!snapshot)
+        var _a;
+        if (snapshot === null)
             return;
         const current = UnitScope.current;
         let context = null;
@@ -596,7 +559,7 @@ class UnitScope {
             UnitScope.current = snapshot.unit;
             if (snapshot.unit !== null) {
                 if (snapshot.context !== null) {
-                    context = UnitScope.get(snapshot.unit);
+                    context = (_a = UnitScope.contexts.get(snapshot.unit)) !== null && _a !== void 0 ? _a : null;
                     UnitScope.contexts.set(snapshot.unit, snapshot.context);
                 }
                 if (snapshot.element !== null) {
@@ -622,16 +585,19 @@ class UnitScope {
         }
     }
     static snapshot(unit = UnitScope.current) {
+        var _a;
         if (unit !== null) {
-            return { unit, context: UnitScope.get(unit), element: unit.element };
+            return { unit, context: (_a = UnitScope.contexts.get(unit)) !== null && _a !== void 0 ? _a : null, element: unit.element };
         }
         return null;
     }
     static stack(unit, key, value) {
-        UnitScope.contexts.set(unit, { stack: UnitScope.get(unit), key, value });
+        var _a;
+        UnitScope.contexts.set(unit, { stack: (_a = UnitScope.contexts.get(unit)) !== null && _a !== void 0 ? _a : null, key, value });
     }
     static trace(unit, key) {
-        for (let context = UnitScope.get(unit); context !== null; context = context.stack) {
+        var _a;
+        for (let context = (_a = UnitScope.contexts.get(unit)) !== null && _a !== void 0 ? _a : null; context !== null; context = context.stack) {
             if (context.key === key) {
                 return context.value;
             }
@@ -641,142 +607,6 @@ class UnitScope {
 UnitScope.current = null;
 UnitScope.contexts = new Map();
 //----------------------------------------------------------------------------------------------------
-// unit component
-//----------------------------------------------------------------------------------------------------
-class UnitComponent {
-    static finalize(unit) {
-        var _a;
-        (_a = UnitComponent.components.get(unit)) === null || _a === void 0 ? void 0 : _a.forEach((component) => {
-            UnitComponent.units.delete(component, unit);
-        });
-        UnitComponent.components.delete(unit);
-    }
-    static add(unit, component) {
-        UnitComponent.components.add(unit, component);
-        UnitComponent.units.add(component, unit);
-    }
-    static find(component) {
-        var _a;
-        return [...((_a = UnitComponent.units.get(component)) !== null && _a !== void 0 ? _a : [])];
-    }
-}
-UnitComponent.components = new MapSet();
-UnitComponent.units = new MapSet();
-//----------------------------------------------------------------------------------------------------
-// unit event
-//----------------------------------------------------------------------------------------------------
-class UnitEvent {
-    static on(unit, type, listener, options) {
-        if (typeof type !== 'string' || type.trim() === '') {
-            throw new Error('"type" is invalid.');
-        }
-        else if (typeof listener !== 'function') {
-            throw new Error('"listener" is invalid.');
-        }
-        const snapshot = UnitScope.snapshot();
-        const types = type.trim().split(/\s+/);
-        types.forEach((type) => {
-            if (!UnitEvent.listeners.has(unit, type, listener)) {
-                const execute = (...args) => {
-                    UnitScope.execute(snapshot, listener, ...args);
-                };
-                UnitEvent.listeners.set(unit, type, listener, [unit.element, execute]);
-                UnitEvent.units.add(type, unit);
-                if (/^[A-Za-z]/.test(type)) {
-                    unit.element.addEventListener(type, execute, options);
-                }
-            }
-        });
-    }
-    static off(unit, type, listener) {
-        if (typeof type === 'string' && type.trim() === '') {
-            throw new Error('"type" is invalid.');
-        }
-        else if (listener !== undefined && typeof listener !== 'function') {
-            throw new Error('"listener" is invalid.');
-        }
-        const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...UnitEvent.listeners.keys(unit)];
-        types.forEach((type) => {
-            const listeners = listener ? [listener] : [...UnitEvent.listeners.keys(unit, type)];
-            listeners.forEach((lis) => {
-                const tuple = UnitEvent.listeners.get(unit, type, lis);
-                if (tuple !== undefined) {
-                    const [target, execute] = tuple;
-                    UnitEvent.listeners.delete(unit, type, lis);
-                    if (/^[A-Za-z]/.test(type)) {
-                        target.removeEventListener(type, execute);
-                    }
-                }
-            });
-            if (!UnitEvent.listeners.has(unit, type)) {
-                UnitEvent.units.delete(type, unit);
-            }
-        });
-    }
-    static emit(unit, type, ...args) {
-        var _a, _b;
-        if (typeof type !== 'string') {
-            throw new Error('The argument [type] is invalid.');
-        }
-        else if ((unit === null || unit === void 0 ? void 0 : unit._.state) === LIFECYCLE_STATES.FINALIZED) {
-            throw new Error('This function can not be called after finalized.');
-        }
-        if (type[0] === CUSTOM_EVENT_PREFIX.GLOBAL) {
-            (_a = UnitEvent.units.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((unit) => {
-                var _a;
-                (_a = UnitEvent.listeners.get(unit, type)) === null || _a === void 0 ? void 0 : _a.forEach(([_, execute]) => execute(...args));
-            });
-        }
-        else if (type[0] === CUSTOM_EVENT_PREFIX.INTERNAL && unit !== null) {
-            (_b = UnitEvent.listeners.get(unit, type)) === null || _b === void 0 ? void 0 : _b.forEach(([_, execute]) => execute(...args));
-        }
-    }
-    static subon(unit, target, type, listener, options) {
-        if (typeof type !== 'string' || type.trim() === '') {
-            throw new Error('"type" is invalid.');
-        }
-        else if (typeof listener !== 'function') {
-            throw new Error('"listener" is invalid.');
-        }
-        const snapshot = UnitScope.snapshot();
-        const types = type.trim().split(/\s+/);
-        types.forEach((type) => {
-            if (!UnitEvent.sublisteners.has(unit, type, listener)) {
-                const execute = (...args) => {
-                    UnitScope.execute(snapshot, listener, ...args);
-                };
-                UnitEvent.sublisteners.set(unit, type, listener, [target, execute]);
-                target.addEventListener(type, execute, options);
-            }
-        });
-    }
-    static suboff(unit, target, type, listener) {
-        if (typeof type === 'string' && type.trim() === '') {
-            throw new Error('"type" is invalid.');
-        }
-        else if (listener !== undefined && typeof listener !== 'function') {
-            throw new Error('"listener" is invalid.');
-        }
-        const types = typeof type === 'string' ? type.trim().split(/\s+/) : [...UnitEvent.sublisteners.keys(unit)];
-        types.forEach((type) => {
-            const listeners = listener ? [listener] : [...UnitEvent.sublisteners.keys(unit, type)];
-            listeners.forEach((lis) => {
-                const tuple = UnitEvent.sublisteners.get(unit, type, lis);
-                if (tuple !== undefined) {
-                    const [element, execute] = tuple;
-                    if (target === null || target === element) {
-                        UnitEvent.sublisteners.delete(unit, type, lis);
-                        element.removeEventListener(type, execute);
-                    }
-                }
-            });
-        });
-    }
-}
-UnitEvent.units = new MapSet;
-UnitEvent.listeners = new MapMapMap;
-UnitEvent.sublisteners = new MapMapMap;
-//----------------------------------------------------------------------------------------------------
 // unit promise
 //----------------------------------------------------------------------------------------------------
 class UnitPromise {
@@ -784,18 +614,15 @@ class UnitPromise {
         this.promise = new Promise(executor);
     }
     then(callback) {
-        const snapshot = UnitScope.snapshot();
-        this.promise = this.promise.then((...args) => UnitScope.execute(snapshot, callback, ...args));
+        this.promise = this.promise.then(UnitScope.wrap(callback));
         return this;
     }
     catch(callback) {
-        const snapshot = UnitScope.snapshot();
-        this.promise = this.promise.catch((...args) => UnitScope.execute(snapshot, callback, ...args));
+        this.promise = this.promise.catch(UnitScope.wrap(callback));
         return this;
     }
     finally(callback) {
-        const snapshot = UnitScope.snapshot();
-        this.promise = this.promise.finally((...args) => UnitScope.execute(snapshot, callback, ...args));
+        this.promise = this.promise.finally(UnitScope.wrap(callback));
         return this;
     }
     static get(unit) {
@@ -806,20 +633,14 @@ class UnitPromise {
         UnitPromise.promises.delete(unit);
     }
     static execute(unit, promise) {
+        const inner = promise !== null && promise !== void 0 ? promise : UnitPromise.get(unit);
+        const unitPromise = new UnitPromise((resolve, reject) => {
+            inner.then((...args) => resolve(...args)).catch((...args) => reject(...args));
+        });
         if (promise !== undefined) {
-            const upromise = new UnitPromise((resolve, reject) => {
-                promise.then((...args) => resolve(...args)).catch((...args) => reject(...args));
-            });
-            UnitPromise.promises.add(unit, upromise);
-            return upromise;
-        }
-        else {
-            const promiseall = UnitPromise.get(unit);
-            const upromise = new UnitPromise((resolve, reject) => {
-                promiseall.then((...args) => resolve(...args)).catch((...args) => reject(...args));
-            });
-            return upromise;
+            UnitPromise.promises.add(unit, unitPromise);
         }
+        return unitPromise;
     }
 }
 UnitPromise.promises = new MapSet();
@@ -832,8 +653,7 @@ const xnew$1 = (() => {
         }
         else if (typeof args[0] === 'string') {
             const str = args.shift(); // a selector for an existing html element
-            const match = str.match(/<([^>]*)\/?>/);
-            if (match) {
+            if (str.match(/<([^>]*)\/?>/)) {
                 target = str;
             }
             else {
@@ -972,7 +792,7 @@ const xnew$1 = (() => {
     };
     fn.find = (component) => {
         if (typeof component === 'function') {
-            return UnitComponent.find(component);
+            return Unit.find(component);
         }
         else {
             throw new Error(`The argument [component] is invalid.`);
@@ -980,7 +800,7 @@ const xnew$1 = (() => {
     };
     fn.append = (base, ...args) => {
         if (typeof base === 'function') {
-            for (let unit of UnitComponent.find(base)) {
+            for (let unit of Unit.find(base)) {
                 UnitScope.execute(UnitScope.snapshot(unit), xnew$1, ...args);
             }
         }
@@ -1071,10 +891,10 @@ const xnew$1 = (() => {
     fn.listener = function (target) {
         return {
             on(type, listener, options) {
-                UnitEvent.subon(UnitScope.current, target, type, listener, options);
+                Unit.subon(UnitScope.current, target, type, listener, options);
             },
             off(type, listener) {
-                UnitEvent.suboff(UnitScope.current, target, type, listener);
+                Unit.suboff(UnitScope.current, target, type, listener);
             }
         };
     };
@@ -1315,7 +1135,7 @@ function ModalFrame(frame, {} = {}) {
     xnew$1.context('xnew.modalframe', frame);
     xnew$1.nest('<div style="position: fixed; inset: 0;">');
     let content = null;
-    xnew$1.capture((unit) => unit.components.includes(ModalContent), (unit) => {
+    xnew$1.capture((unit) => unit.components.has(ModalContent), (unit) => {
         content = unit;
     });
     xnew$1().on('click', (event) => {
@@ -1363,10 +1183,10 @@ function TabFrame(frame, { select = 0 } = {}) {
     xnew$1.context('xnew.tabframe', frame);
     const buttons = [];
     const contents = [];
-    xnew$1.capture((unit) => unit.components.includes(TabButton), (unit) => {
+    xnew$1.capture((unit) => unit.components.has(TabButton), (unit) => {
         buttons.push(unit);
     });
-    xnew$1.capture((unit) => unit.components.includes(TabContent), (unit) => {
+    xnew$1.capture((unit) => unit.components.has(TabContent), (unit) => {
         contents.push(unit);
     });
     frame.on('-click', ({ unit }) => execute(buttons.indexOf(unit)));
@@ -1410,7 +1230,7 @@ function TabContent(self, {} = {}) {
 function AccordionFrame(frame, {} = {}) {
     xnew$1.context('xnew.accordionframe', frame);
     let content = null;
-    xnew$1.capture((unit) => unit.components.includes(AccordionContent), (unit) => {
+    xnew$1.capture((unit) => unit.components.has(AccordionContent), (unit) => {
         content = unit;
     });
     return {