@twobirds/microcomponents 0.0.84 → 0.0.86

package/public/src/test/test.ts

@@ -5,6 +5,7 @@ import {
 	getCE,
 	observe,
 	Observable,
+	HTMLMcElement,
 } from '../microcomponents.js';
 
 class Translator extends DC {
@@ -39,83 +40,71 @@ class Translator extends DC {
 
 		(that.Translation as Observable).bind(translationTargetObject);
 
-		that.target.setAttribute('language', 'en');
-
 		(that.Language as Observable).notify();
 	}
 
-	onAttributeChanged(ev: CustomEvent) {
-		let detail = ev.detail || {};
-		if (!detail.newValue) return;
-		switch (detail.name) {
-			case 'language':
-				this.Language = detail.newValue;
-				break;
-		}
+}
+
+class MyButton extends DC {
+	#template: string = '{lang.click} {counter}';
+
+	#languages = {
+		en: {
+			click: 'click me',
+		},
+		de: {
+			click: 'klick mich',
+		},
+	};
+
+	Dom: LooseObject = {};
+
+	constructor(target: HTMLElement) {
+		super(target);
+
+		// render
+		target.innerHTML = this.#template;
+
+		// state
+		this.Dom = { counter: 0 };
+
+		// state: convert all props defined so far into observables
+		observe(this);
+
+		// add translator
+		DC.add(
+			target,
+			'Translator',
+			new Translator(target, this.#languages, target)
+		);
+
+		// bind Dom to target
+		(this.Dom as Observable).bind(this.target);
+	}
+
+	onClick(ev: Event) {
+		// console.log('button.myButton onClick()');
+		const c = this.Dom.counter++;
+		ev.stopPropagation();
+		(this.target as HTMLElement).classList.remove('clicked');
+		(this.target as HTMLElement).classList.add( this.Dom.counter > 9 ? 'overClicked' : 'clicked' );
 	}
 }
 
+function makeButton(): HTMLMcElement {
+	const 
+		button = document.createElement('button');
+	button.classList.add('myButton');
+	DC.add( button, 'MyButton', new MyButton(button) );
+	return button as unknown as HTMLMcElement;
+}
+
 defineCE(
-	// equivalent to custom element registry .define()
-	'my-tag',
-	class MyTag extends DC {
-		#template: string = '<button>{lang.click} {counter}</button>';
-
-		#languages = {
-			en: {
-				click: 'click me',
-			},
-			de: {
-				click: 'klick mich',
-			},
-		};
-
-		Dom: LooseObject = {};
-
-		constructor(target: HTMLElement) {
-			super(target);
-
-			let that = this; // minifier help
-
-			// render
-			target.innerHTML = this.#template;
-
-			// add translator
-			DC.add(
-				target,
-				'translator',
-				new Translator(target, that.#languages, target)
-			);
-		}
-
-		oneInit(ev: CustomEvent) {
-			let that = this;
-
-			// state
-			that.Dom = { counter: 0 };
-
-			// state: convert all props defined so far into observables
-			observe(that);
-
-			// bind Dom to target
-			(that.Dom as Observable).bind(that.target);
-		}
-
-		onClick(ev: CustomEvent) {
-			const that = this,
-				c = that.Dom.counter++;
-			(ev.detail.data as PointerEvent).stopPropagation();
-			(that.target as HTMLElement).classList.remove('clicked');
-			(that.target as HTMLElement).classList.add(
-				that.Dom.counter > 9 ? 'overClicked' : 'clicked'
-			);
-		}
-	},
-	['language']
+	'make-button',
+	makeButton
 );
 
-let MyTag: CustomElementConstructor = getCE('my-tag')!,
-	fragment = new DocumentFragment();
+let fragment = new DocumentFragment();
 
 /*
 stress test
@@ -126,7 +115,7 @@ let start = new Date().getTime(),
 
 // create 1000 elements
 for (let x = 0; x < max; x++) {
-	fragment.append(new MyTag());
+	fragment.append( (getCE('make-button') as Function)());
 }
 
 let end = new Date().getTime();
@@ -148,14 +137,14 @@ setTimeout(() => {
 		'font-weight: bold; color: black;',
 		'font-weight: normal;',
 		max,
-		max * 3,
+		max * 2,
 		'font-weight: bold; color: blue;',
 		end - start
 	);
 
 	//document.body.appendChild(new MyTag());
 
-	let element = document.querySelector('my-tag');
+	let element = document.querySelector('button');
 
 	console.log(
 		"\n\n%cInspect this tag:%c \n( ...to see the inner structure in the '._mc' property )\n\n %O %c %s",
@@ -184,5 +173,5 @@ setTimeout(() => {
 	);
 
 	// will trigger the event on all micro components contained in <my-tag>
-	DC.trigger(element, 'doSomething');
+	( element as unknown as HTMLMcElement )._mc?.trigger('doSomething');
 }, 1000);

package/public/test/MC.d.ts

@@ -10,27 +10,24 @@ declare class McBase {
     private _target;
     constructor(target?: {
         [key: string]: any;
-    }, debug?: boolean);
+    });
     get target(): any;
 }
 declare class MC extends McBase {
     constructor(target?: any);
-    static trigger: typeof trigger;
-    trigger(ev: string, data?: any, bubble?: string): void;
 }
 declare class DC extends McBase {
     constructor(target: HTMLElement, debug?: boolean);
     static add: Function;
     static remove: Function;
-    static trigger: Function;
     off(eventName: string, handler: EventListenerOrEventListenerObject): void;
     on(eventName: string, handler: EventListenerOrEventListenerObject): void;
     one(eventName: string, handler: EventListenerOrEventListenerObject): void;
-    trigger(ev: CustomEvent | string, data?: any, bubble?: string): void;
-    parent(search?: string): any[];
-    ancestors(search?: string): any[];
-    children(search?: string): any[];
-    descendants(search?: string): any[];
+    trigger(eventName: string, data?: any, bubble?: string): void;
+    parent(): DC | null;
+    ancestors(): DC[] | null;
+    children(): DC[] | null;
+    descendants(): DC[] | null;
 }
 declare function autoload(enable?: boolean): boolean;
 export { McBase, MC, DC, autoload, on, one, off, trigger };

package/public/test/MC.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAiB3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA2HD,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAED,iBAAS,EAAE,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE,IAAI,GAAE,OAAe,QAEhH;AAED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAGD,iBAAS,OAAO,CACf,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,WAAW,GAAG,MAAM,EAC3B,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAepB;AA4ED,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAUnE,IAAI,MAAM,IAAI,GAAG,CAEhB;CAED;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;IAIxB,MAAM,CAAC,OAAO,iBAAW;IAEzB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;CAGxD;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,EAAE,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,OAAO,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;IAOtE,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAQpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAMvC;AA+GD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAiB3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AAmED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAED,iBAAS,EAAE,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE,IAAI,GAAE,OAAe,QAEhH;AAED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAGD,iBAAS,OAAO,CACf,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,WAAW,GAAG,MAAM,EAC3B,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAepB;AA+ED,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;IAU3C,IAAI,MAAM,IAAI,GAAG,CAEhB;CAED;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;CAGxB;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IAGjC,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,EAAE,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,OAAO,CAAE,SAAS,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;IAKhE,MAAM,IAAI,EAAE,GAAG,IAAI;IAOnB,SAAS,IAAI,EAAE,EAAE,GAAG,IAAI;IAgBxB,QAAQ,IAAI,EAAE,EAAE,GAAG,IAAI;IAMvB,WAAW,IAAI,EAAE,EAAE,GAAG,IAAI;CAS1B;AAiHD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC"}

package/public/test/MC.js

@@ -1,5 +1,5 @@
 'use strict';
-var isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
+const isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
 function getNativeEventNames(domNode) {
     let nativeEventNames = [];
     if (isBrowser()) {
@@ -9,51 +9,13 @@ function getNativeEventNames(domNode) {
     }
     return nativeEventNames;
 }
-function getMicroComponents(elements, search) {
-    let mcValues = [];
-    elements.forEach((e) => {
-        if (e) {
-            if (e instanceof HTMLElement) {
-                const _mc = e?._mc;
-                if (!search && _mc) {
-                    mcValues = mcValues.concat(Object.values(e._mc));
-                }
-                else if (search && _mc && _mc[search]) {
-                    mcValues.push(_mc[search]);
-                }
-            }
-        }
-    });
-    return mcValues;
-}
-function traverseNodes(node, search, firstonly = true) {
-    let mcValues = [];
-    while (node) {
-        if (node._mc) {
-            if (!search) {
-                mcValues = mcValues.concat(Object.values(node._mc));
-            }
-            else if (search && node._mc[search]) {
-                mcValues.push(node._mc[search]);
-            }
-            if (firstonly)
-                return mcValues;
-        }
-        node = node.parentNode;
-    }
-    return mcValues;
-}
 function isDOM(element) {
     return element && element instanceof HTMLElement;
 }
 function add(target, key, element = {}) {
     let node = target;
     if (!node._mc) {
-        let debug = DC?.debug;
-        DC.debug = false;
         node._mc = new DC(target);
-        DC.debug = debug;
-        delete node._mc._mc;
     }
     const _mc = node._mc;
     if (key.length && !_mc[key]) {
@@ -62,7 +24,7 @@ function add(target, key, element = {}) {
             target.setAttribute('data-mc', '');
         }
     }
-    return element;
+    return node;
 }
 function remove(target, key) {
     if (!key)
@@ -79,9 +41,9 @@ function remove(target, key) {
     return;
 }
 function init(element) {
-    if (element.constructor === DC)
-        return;
     setTimeout(() => {
+        if (element.constructor === DC)
+            return;
         element.trigger('Init');
     }, 0);
 }
@@ -122,7 +84,7 @@ function bubbleEvent(domNode, ev) {
                 .map((c) => c?.target));
             targets.forEach((target) => {
                 if (target)
-                    DC.trigger(target, ev);
+                    target._mc.trigger(target, ev);
             });
         }
     }, 0);
@@ -138,13 +100,16 @@ function autoAttachListeners(element) {
             typeof that.constructor.prototype[key] === 'function')
             .forEach((key) => {
             let once = /^one/.test(key), withoutOnOne = key.replace(/^on[e]{0,1}/, ''), nativeEventName = withoutOnOne.toLowerCase();
-            let listener = (ev) => {
-                that[key](ev);
-            };
-            if (!!target['on' + nativeEventName]) {
+            if (('on' + nativeEventName) in target) {
+                let listener = (ev) => {
+                    that[key](ev);
+                };
                 target.addEventListener(nativeEventName, listener);
             }
             else {
+                let listener = (ev) => {
+                    that[key](ev);
+                };
                 on(target, withoutOnOne, listener, once);
             }
         });
@@ -154,13 +119,15 @@ function getMcChildNodes(domNode) {
     const id = Math.random().toString().replace('.', '');
     const selector = '[data-mc]:not([temp_id="' + id + '"] [data-mc] [data-mc])';
     domNode.setAttribute('temp_id', id);
-    const myDomElements = domNode.querySelectorAll(selector);
+    const mcArray = [...domNode.querySelectorAll(selector)]
+        .filter((e) => !!e._mc)
+        .map(e => e._mc);
     domNode.removeAttribute('temp_id');
-    return myDomElements;
+    return mcArray.length ? mcArray : null;
 }
 class McBase {
     _target;
-    constructor(target, debug = false) {
+    constructor(target) {
         let element = this;
         this._target = new WeakRef(target || {});
         init(element);
@@ -174,9 +141,6 @@ class MC extends McBase {
     constructor(target) {
         super(target);
     }
-    static trigger = trigger;
-    trigger(ev, data = {}, bubble = 'l') {
-    }
 }
 class DC extends McBase {
     constructor(target, debug = false) {
@@ -184,7 +148,6 @@ class DC extends McBase {
     }
     static add = add;
     static remove = remove;
-    static trigger = trigger;
     off(eventName, handler) {
         off(this.target, eventName, handler);
     }
@@ -194,36 +157,40 @@ class DC extends McBase {
     one(eventName, handler) {
         one(this.target, eventName, handler);
     }
-    trigger(ev, data = {}, bubble = 'l') {
-        if (typeof ev === 'string') {
-        }
+    trigger(eventName, data = {}, bubble = 'l') {
+        trigger(this.target, eventName, data, bubble);
     }
-    parent(search = '') {
+    parent() {
         let target = this.target;
         if (!isDOM(target))
-            return [];
-        return traverseNodes(target.parentNode, search, true);
+            return null;
+        return target.closest('[data-mc]')?._mc || null;
     }
-    ancestors(search = '') {
-        let target = this?.target;
-        if (!isDOM(target))
+    ancestors() {
+        let currentNode = this?.target, result = [];
+        if (!isDOM(currentNode))
             return [];
-        return traverseNodes(this.target.parentNode, search, false);
+        while (currentNode = (currentNode.closest('[data-mc]'))) {
+            if (currentNode?._mc) {
+                result.push(currentNode?._mc);
+            }
+        }
+        return result.length ? result : null;
     }
-    children(search = '') {
+    children() {
         let target = this?.target;
         if (!isDOM(target))
-            return [];
-        const myDomElements = getMcChildNodes(target);
-        const mcValues = getMicroComponents([...myDomElements], search);
-        return mcValues;
+            return null;
+        return getMcChildNodes(target);
     }
-    descendants(search = '') {
-        let target = this?.target;
+    descendants() {
+        const target = this?.target;
         if (!isDOM(target))
             return [];
-        const myDomElements = target.querySelectorAll('*[data-mc]');
-        return getMicroComponents([...myDomElements], search);
+        const mcArray = [...target.querySelectorAll('[data-mc]')]
+            .filter((e) => !!e._mc)
+            .map(e => e._mc);
+        return mcArray.length ? mcArray : null;
     }
 }
 const loadingDCs = new Set();

package/public/test/MC.min.js

@@ -56,7 +56,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   trigger: () => (/* binding */ trigger)
 /* harmony export */ });
 
-var isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
+const isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
 function getNativeEventNames(domNode) {
     let nativeEventNames = [];
     if (isBrowser()) {
@@ -66,51 +66,13 @@ function getNativeEventNames(domNode) {
     }
     return nativeEventNames;
 }
-function getMicroComponents(elements, search) {
-    let mcValues = [];
-    elements.forEach((e) => {
-        if (e) {
-            if (e instanceof HTMLElement) {
-                const _mc = e?._mc;
-                if (!search && _mc) {
-                    mcValues = mcValues.concat(Object.values(e._mc));
-                }
-                else if (search && _mc && _mc[search]) {
-                    mcValues.push(_mc[search]);
-                }
-            }
-        }
-    });
-    return mcValues;
-}
-function traverseNodes(node, search, firstonly = true) {
-    let mcValues = [];
-    while (node) {
-        if (node._mc) {
-            if (!search) {
-                mcValues = mcValues.concat(Object.values(node._mc));
-            }
-            else if (search && node._mc[search]) {
-                mcValues.push(node._mc[search]);
-            }
-            if (firstonly)
-                return mcValues;
-        }
-        node = node.parentNode;
-    }
-    return mcValues;
-}
 function isDOM(element) {
     return element && element instanceof HTMLElement;
 }
 function add(target, key, element = {}) {
     let node = target;
     if (!node._mc) {
-        let debug = DC?.debug;
-        DC.debug = false;
         node._mc = new DC(target);
-        DC.debug = debug;
-        delete node._mc._mc;
     }
     const _mc = node._mc;
     if (key.length && !_mc[key]) {
@@ -119,7 +81,7 @@ function add(target, key, element = {}) {
             target.setAttribute('data-mc', '');
         }
     }
-    return element;
+    return node;
 }
 function remove(target, key) {
     if (!key)
@@ -136,9 +98,9 @@ function remove(target, key) {
     return;
 }
 function init(element) {
-    if (element.constructor === DC)
-        return;
     setTimeout(() => {
+        if (element.constructor === DC)
+            return;
         element.trigger('Init');
     }, 0);
 }
@@ -179,7 +141,7 @@ function bubbleEvent(domNode, ev) {
                 .map((c) => c?.target));
             targets.forEach((target) => {
                 if (target)
-                    DC.trigger(target, ev);
+                    target._mc.trigger(target, ev);
             });
         }
     }, 0);
@@ -195,13 +157,16 @@ function autoAttachListeners(element) {
             typeof that.constructor.prototype[key] === 'function')
             .forEach((key) => {
             let once = /^one/.test(key), withoutOnOne = key.replace(/^on[e]{0,1}/, ''), nativeEventName = withoutOnOne.toLowerCase();
-            let listener = (ev) => {
-                that[key](ev);
-            };
-            if (!!target['on' + nativeEventName]) {
+            if (('on' + nativeEventName) in target) {
+                let listener = (ev) => {
+                    that[key](ev);
+                };
                 target.addEventListener(nativeEventName, listener);
             }
             else {
+                let listener = (ev) => {
+                    that[key](ev);
+                };
                 on(target, withoutOnOne, listener, once);
             }
         });
@@ -211,13 +176,15 @@ function getMcChildNodes(domNode) {
     const id = Math.random().toString().replace('.', '');
     const selector = '[data-mc]:not([temp_id="' + id + '"] [data-mc] [data-mc])';
     domNode.setAttribute('temp_id', id);
-    const myDomElements = domNode.querySelectorAll(selector);
+    const mcArray = [...domNode.querySelectorAll(selector)]
+        .filter((e) => !!e._mc)
+        .map(e => e._mc);
     domNode.removeAttribute('temp_id');
-    return myDomElements;
+    return mcArray.length ? mcArray : null;
 }
 class McBase {
     _target;
-    constructor(target, debug = false) {
+    constructor(target) {
         let element = this;
         this._target = new WeakRef(target || {});
         init(element);
@@ -231,9 +198,6 @@ class MC extends McBase {
     constructor(target) {
         super(target);
     }
-    static trigger = trigger;
-    trigger(ev, data = {}, bubble = 'l') {
-    }
 }
 class DC extends McBase {
     constructor(target, debug = false) {
@@ -241,7 +205,6 @@ class DC extends McBase {
     }
     static add = add;
     static remove = remove;
-    static trigger = trigger;
     off(eventName, handler) {
         off(this.target, eventName, handler);
     }
@@ -251,36 +214,40 @@ class DC extends McBase {
     one(eventName, handler) {
         one(this.target, eventName, handler);
     }
-    trigger(ev, data = {}, bubble = 'l') {
-        if (typeof ev === 'string') {
-        }
+    trigger(eventName, data = {}, bubble = 'l') {
+        trigger(this.target, eventName, data, bubble);
     }
-    parent(search = '') {
+    parent() {
         let target = this.target;
         if (!isDOM(target))
-            return [];
-        return traverseNodes(target.parentNode, search, true);
+            return null;
+        return target.closest('[data-mc]')?._mc || null;
     }
-    ancestors(search = '') {
-        let target = this?.target;
-        if (!isDOM(target))
+    ancestors() {
+        let currentNode = this?.target, result = [];
+        if (!isDOM(currentNode))
             return [];
-        return traverseNodes(this.target.parentNode, search, false);
+        while (currentNode = (currentNode.closest('[data-mc]'))) {
+            if (currentNode?._mc) {
+                result.push(currentNode?._mc);
+            }
+        }
+        return result.length ? result : null;
     }
-    children(search = '') {
+    children() {
         let target = this?.target;
         if (!isDOM(target))
-            return [];
-        const myDomElements = getMcChildNodes(target);
-        const mcValues = getMicroComponents([...myDomElements], search);
-        return mcValues;
+            return null;
+        return getMcChildNodes(target);
     }
-    descendants(search = '') {
-        let target = this?.target;
+    descendants() {
+        const target = this?.target;
         if (!isDOM(target))
             return [];
-        const myDomElements = target.querySelectorAll('*[data-mc]');
-        return getMicroComponents([...myDomElements], search);
+        const mcArray = [...target.querySelectorAll('[data-mc]')]
+            .filter((e) => !!e._mc)
+            .map(e => e._mc);
+        return mcArray.length ? mcArray : null;
     }
 }
 const loadingDCs = new Set();