@twobirds/microcomponents 0.0.84 → 0.0.85

package/public/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);
@@ -211,13 +173,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 +195,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 +202,6 @@ class DC extends McBase {
     }
     static add = add;
     static remove = remove;
-    static trigger = trigger;
     off(eventName, handler) {
         off(this.target, eventName, handler);
     }
@@ -251,36 +211,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/MC.ts

@@ -2,7 +2,7 @@
 
 import { LooseObject } from './helpers.js';
 
-var isBrowser = new Function(
+const isBrowser = new Function(
 	'try {return this===window;}catch(e){ return false;}'
 );
 
@@ -21,61 +21,17 @@ export interface HTMLMcElement extends HTMLElement {
 	_mc: LooseObject;
 }
 
-// get all microcomponents from a list of HTMLElements
-function getMicroComponents(elements: any[], search: string): any[] {
-	let mcValues: any[] = [];
-
-	elements.forEach((e) => {
-		if (e) {
-			if (e instanceof HTMLElement) {
-				const _mc = (e as any)?._mc;
-				if (!search && _mc) {
-					mcValues = mcValues.concat(Object.values((e as any)._mc));
-				} else if (search && _mc && _mc[search]) {
-					mcValues.push(_mc[search]);
-				}
-			}
-		}
-	});
-	return mcValues;
-}
-
-// get all ancestor DOM nodes up to the document root
-function traverseNodes(
-	node: { [key: string]: any },
-	search: string,
-	firstonly = true
-): any[] {
-	let mcValues: any[] = [];
-	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: { [key: string]: any }) {
 	return element && element instanceof HTMLElement;
 }
 
 // add a microcomponent to a target DOM node
-function add(target: HTMLElement, key: string, element = {}): any {
+function add( target: HTMLElement, key: string, element: any = {} ): HTMLMcElement {
 	let node = target as HTMLMcElement;
 
 	// create the _mc property if necessary
 	if (!node._mc) {
-		let debug = (DC as any)?.debug;
-		(DC as any).debug = false;
 		node._mc = new (DC as any)(target);
-		(DC as any).debug = debug;
-		delete node._mc._mc; // NOT NEEDED on the top level _mc property of a DOM HTMLElement
 	}
 
 	const _mc = node._mc;
@@ -88,7 +44,8 @@ function add(target: HTMLElement, key: string, element = {}): any {
 			target.setAttribute('data-mc', '');
 		}
 	}
-	return element;
+
+	return node;
 }
 
 // remove a micro component from the DOM
@@ -114,27 +71,14 @@ function remove(target: HTMLMcElement, key: string) {
 }
 
 // run the "init" lifecycle event on the complete _mc structure
-function init(element: MC | DC) {
-	if (element.constructor === DC) return;
-
+function init(element: DC) {
 	setTimeout(() => {
+		if (element.constructor === DC) return;
 		element.trigger('Init');
-		/*
-			let keys = Object.keys( ( element as any)?._mc );
-			if ( keys.length ){
-				//console.log( 'inner Inits on [', mc.constructor.name, ']', keys );
-				keys?.forEach( (key: string) => {
-					let mc = ( element as any)?._mc?.[key];
-					//console.log( key, typeof mc?.oneInit, mc );
-					if ( ( mc as any )['oneInit'] &&  typeof ( mc as any ).oneInit == 'function' ){
-						( mc as any ).oneInit( new McEvent('Init') );
-					}
-				});
-			};
-			*/
 	}, 0);
 }
 
+// 'eventName' => '_mcEventName'
 function getMcEventName( eventName: string ): string {
 	return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
 }
@@ -156,8 +100,8 @@ function one( domNode: Node, eventName: string, handler: EventListenerOrEventLis
 
 // create and dispatch custom event
 function trigger( 
-	domNode: HTMLElement, 
-	event: CustomEvent | string, 
+	domNode: HTMLElement,
+	event: CustomEvent | string,
 	data: any = {},
 	bubble: string = 'l'
 ){
@@ -199,7 +143,7 @@ function bubbleEvent( domNode: HTMLElement, ev: CustomEvent) {
 					.map((c: unknown) => (c as any)?.target)
 			);
 			targets.forEach((target: HTMLMcElement) => {
-				if (target) DC.trigger(target, ev);
+				if (target) target._mc.trigger(target, ev);
 			});
 		}
 
@@ -241,24 +185,27 @@ function autoAttachListeners(element: MC | DC) {
 	}
 }
 
-function getMcChildNodes(domNode: HTMLElement): NodeListOf<Element> {
+function getMcChildNodes(domNode: HTMLElement): DC[] | null {
 	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: unknown[] = 
+		( [ ...domNode.querySelectorAll(selector) ] as HTMLMcElement[])
+			.filter( (e) => !!e._mc )
+			.map( e => e._mc );
 	domNode.removeAttribute('temp_id');
-	return myDomElements;
+	return mcArray.length ? mcArray as DC[] : null;
 }
 
 class McBase {
 	private _target: WeakRef<any>; // avoid circular reference
 
-	constructor(target?: { [key: string]: any }, debug: boolean = false) {
+	constructor(target?: { [key: string]: any } ) {
 		let element = this as unknown as MC | DC;
 
 		this._target = new WeakRef(target || {});
 
-		init(element); // async lifecycle event
+		init(element as DC); // async lifecycle event
 
 		autoAttachListeners(element);
 	}
@@ -273,12 +220,6 @@ class MC extends McBase {
 	constructor(target?: any) {
 		super(target);
 	}
-
-	static trigger = trigger;
-	
-	trigger(ev: string, data: any = {}, bubble: string = 'l') {
-		// TBD
-	}
 }
 
 class DC extends McBase {
@@ -288,8 +229,8 @@ class DC extends McBase {
 
 	static add: Function = add;
 	static remove: Function = remove;
-	static trigger: Function = trigger;
 
+	/* event handling */
 	off( eventName: string, handler: EventListenerOrEventListenerObject ) {
 		off( this.target, eventName, handler );
 	}
@@ -302,45 +243,57 @@ class DC extends McBase {
 		one( this.target, eventName, handler );
 	}
 
-	trigger(ev: CustomEvent | string, data: any = {}, bubble: string = 'l') {
-		if ( typeof ev === 'string' ){
-
-		}
-		//trigger( this.target, ev, data, bubble);
+	trigger( eventName: string, data: any = {}, bubble: string = 'l') {
+		trigger( this.target, eventName, data, bubble);
 	}
 
-	parent(search: string = ''): any[] {
-		let target: HTMLElement = (this as any).target;
-		if (!isDOM(target)) return [];
-		return traverseNodes((target as any).parentNode, search, true);
+	/* DOM traversal */
+	parent(): DC | null {
+		let 
+			target: HTMLElement = (this as DC).target;
+		if (!isDOM(target)) return null;
+		return (target.closest('[data-mc]') as HTMLMcElement)?._mc as DC || null;
 	}
 
-	ancestors(search: string = ''): any[] {
-		let target: any = (this as any)?.target;
-		if (!isDOM(target)) return [];
-		return traverseNodes((this as any).target.parentNode, search, false);
+	ancestors(): DC[] | null {
+		let 
+			currentNode: HTMLElement | null = (this as DC)?.target as HTMLMcElement,
+			result: DC[] = [];
+
+		if (!isDOM( currentNode )) return [];
+
+		while ( currentNode = (currentNode.closest('[data-mc]') ) ){
+			if ( (currentNode as HTMLMcElement)?._mc ){
+				result.push( (currentNode as HTMLMcElement)?._mc as DC );
+			}
+		}
+
+		return result.length ? result : null;
 	}
 
-	children(search: string = ''): any[] {
+	children(): DC[] | null {
 		let target: any = (this as any)?.target;
-		if (!isDOM(target)) return [];
-		const myDomElements = getMcChildNodes(target);
-		const mcValues = getMicroComponents([...myDomElements], search);
-		return mcValues;
+		if (!isDOM(target)) return null;
+		return getMcChildNodes(target);
 	}
 
-	descendants(search: string = ''): any[] {
-		let target: any = (this as any)?.target;
+	descendants(): DC[] | null {
+		const target: any = (this as DC)?.target;
 		if (!isDOM(target)) return [];
-		const myDomElements = target.querySelectorAll('*[data-mc]');
-		return getMicroComponents([...myDomElements], search);
+		const mcArray: unknown[] = 
+			( [ ...target.querySelectorAll( '[data-mc]' ) ] as HTMLMcElement[])
+				.filter( (e) => !!e._mc )
+				.map( e => e._mc );
+		return mcArray.length ? mcArray as DC[] : null;
 	}
 }
 
+/*
+Autoload Section...
+*/
+
 const loadingDCs = new Set<string>();
 
-// this only applies to DCs defined in the data-mc attribute, 
-// since they need to be attached manually
 function attachDC(element: string): Function {
 
 	//@ts-ignore