@mulsense/xnew 0.1.1 → 0.1.2

package/dist/xnew.js

@@ -108,56 +108,42 @@
         }
     }
 
-    //----------------------------------------------------------------------------------------------------
-    // 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;
         }
@@ -165,130 +151,70 @@
     //----------------------------------------------------------------------------------------------------
     // 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) {
@@ -298,27 +224,28 @@
                 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;
@@ -342,80 +269,32 @@
         }
         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: [] },
             });
@@ -429,12 +308,10 @@
                 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)) {
@@ -442,7 +319,7 @@
                         captured = true;
                     }
                 }
-                if (captured === false) {
+                if (captured === false && current._.parent !== null) {
                     current = current._.parent;
                 }
                 else {
@@ -451,16 +328,18 @@
             }
         }
         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;
@@ -469,12 +348,12 @@
                 }
                 // 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) {
@@ -496,51 +375,49 @@
         }
         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);
@@ -548,14 +425,11 @@
             }
         }
         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) {
@@ -570,8 +444,99 @@
             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
@@ -585,15 +550,13 @@
         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;
@@ -602,7 +565,7 @@
                 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) {
@@ -628,16 +591,19 @@
             }
         }
         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;
                 }
@@ -647,142 +613,6 @@
     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 {
@@ -790,18 +620,15 @@
             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) {
@@ -812,20 +639,14 @@
             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();
@@ -838,8 +659,7 @@
             }
             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 {
@@ -978,7 +798,7 @@
         };
         fn.find = (component) => {
             if (typeof component === 'function') {
-                return UnitComponent.find(component);
+                return Unit.find(component);
             }
             else {
                 throw new Error(`The argument [component] is invalid.`);
@@ -986,7 +806,7 @@
         };
         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);
                 }
             }
@@ -1077,10 +897,10 @@
         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);
                 }
             };
         };
@@ -1321,7 +1141,7 @@
         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) => {
@@ -1369,10 +1189,10 @@
         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)));
@@ -1416,7 +1236,7 @@
     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 {