@twobirds/microcomponents 0.0.37 → 0.0.39

package/src/MC.ts

@@ -141,15 +141,33 @@ function remove(target: HTMLMcElement, key: string) {
 }
 
 // trigger an event
-function trigger(target: unknown, ev: McEvent | string, data: any = {}) {
+function trigger(
+	target: HTMLElement,
+	ev: McEvent | string,
+	data: any = {},
+	bubble: string = 'l'
+) {
 	let _mc = (target as any)?._mc;
 	if (!_mc) return;
+
+	let event =
+			ev instanceof McEvent
+				? new McEvent(ev.type, ev.data, 'l')
+				: new McEvent(ev, data, 'l'),
+		mcEvent: McEvent =
+			typeof ev !== 'string' ? (ev as McEvent) : new McEvent(ev, data, bubble);
+
 	[...Object.values(_mc)].forEach((mc: any) => {
 		//console.log( 'mc [', mc.constructor.name, ']', mc.constructor.prototype?.oneInit );
 		if ((mc as any)?.trigger && typeof (mc as any)?.trigger === 'function') {
-			(mc as any)?.trigger(ev, data);
+			(mc as any)?.trigger(event);
 		}
 	});
+
+	if (/[ud]/.test(mcEvent.bubble)) {
+		bubbleEvent(target, mcEvent);
+	}
+
 	return;
 }
 
@@ -217,6 +235,37 @@ function autoAttachListeners(element: MC | DC) {
 	}
 }
 
+function bubbleEvent(target: HTMLElement, ev: McEvent) {
+	// at this point, either 'u' or 'd' bubbling should be indicated
+	// mcEvent bubbling is asynchronous, and the order of target MC execution in case of multiple matches is not guaranteed!
+	if (/[ud]/.test(ev.bubble)) {
+		setTimeout(() => {
+			// bubbling must include 'l' for local, or else no handlers are executed'
+			if (ev.bubble.indexOf('l') === -1) {
+				ev.bubble += 'l';
+			}
+
+			// bubble up towards root
+			if (ev.bubble.indexOf('u') > -1) {
+				let parent = traverseNodes(target, '', true)?.[0].target;
+				if (parent) DC.trigger(parent, ev);
+			}
+
+			// bubble down
+			if (ev.bubble.indexOf('d') > -1) {
+				let targets = new Set<HTMLMcElement>(
+					(target as HTMLMcElement)._mc
+						.children()
+						.map((c: unknown) => (c as any)?.target)
+				);
+				targets.forEach((target: HTMLMcElement) => {
+					if (target) DC.trigger(target, ev);
+				});
+			}
+		}, 0);
+	}
+}
+
 class McBase {
 	#target: WeakRef<any>; // avoid circular reference
 
@@ -245,22 +294,34 @@ class MC extends McBase {
 
 	static trigger = trigger;
 
-	trigger(ev: McEvent | string, data: any = {}, bubble?: string) {
+	trigger(ev: McEvent | string, data: any = {}, bubble: string = 'l') {
 		let that = this;
 
 		//console.log( that, '.trigger(', ev, data, bubble, ')' );
-		bubble = bubble || 'l';
 
 		// run all triggers
 		if (that.constructor === MC || that.constructor === DC) {
+			let event =
+					ev instanceof McEvent
+						? new McEvent(ev.type, ev.data, 'l')
+						: new McEvent(ev, data, 'l'),
+				mcEvent: McEvent =
+					typeof ev !== 'string'
+						? (ev as McEvent)
+						: new McEvent(ev, data, bubble);
 			[...Object.getOwnPropertyNames(that)].forEach((mc) => {
 				if (
 					(that as any)[mc]?.trigger &&
 					typeof (that as any)[mc]?.trigger === 'function'
 				) {
-					(that as any)[mc]?.trigger(ev, data, bubble);
+					(that as any)[mc]?.trigger(event);
 				}
 			});
+
+			if (/[ud]/.test(mcEvent.bubble)) {
+				bubbleEvent(that.target, mcEvent);
+			}
+
 			return; // must return here!
 		}
 
@@ -294,33 +355,9 @@ class MC extends McBase {
 				return that;
 			}
 
-			// at this point, either 'u' or 'd' bubbling should be indicated
-			// mcEvent bubbling is asynchronous, and the order of target MC execution in case of multiple matches is not guaranteed!
-			if (
-				isBrowser() &&
-				/[ud]/.test(mcEvent.bubble) &&
-				(that as any) instanceof MC
-			) {
-				setTimeout(() => {
-					// bubbling must include 'l' for local, or else no handlers are executed'
-					if (mcEvent.bubble.indexOf('l') === -1) {
-						mcEvent.bubble += 'l';
-					}
-
-					// bubble up towards root
-					if (mcEvent.bubble.indexOf('u') > -1) {
-						(that as any).parent().forEach((mc: any) => {
-							mc instanceof MC ? (mc as any).trigger(mcEvent) : null;
-						});
-					}
-
-					// bubble down
-					if (mcEvent.bubble.indexOf('d') > -1) {
-						(that as any).children().forEach((mc: any) => {
-							mc instanceof MC ? (mc as any).trigger(mcEvent) : null;
-						});
-					}
-				}, 0);
+			//console.log('bubble', mcEvent);
+			if (/[ud]/.test(mcEvent.bubble)) {
+				bubbleEvent(that.target, mcEvent);
 			}
 		}
 	}

package/src/observables.ts

@@ -18,16 +18,15 @@ function isObservableObject(value: any): boolean {
 type Callback = (value: any) => void;
 
 function getPlaceholders(target: HTMLElement): string[] {
-	let placeholders: Set<string> = new Set();
+	let placeholders: Set<string> = new Set(),
+		regEx = /\{[^\{\}]*\}/g;
 
 	// scan attributes
 	target
 		.getAttributeNames()
-		.filter((attr) => target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)) // extract placeholder(s)
+		.filter((attr) => target.getAttribute(attr)?.match(regEx)) // extract placeholder(s)
 		.forEach((attr) => {
-			let phs: Set<string> = new Set(
-				target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
-			);
+			let phs: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
 			phs.forEach((placeholder) =>
 				placeholders.add(placeholder.replace(/[\{\}]/g, ''))
 			);
@@ -39,12 +38,12 @@ function getPlaceholders(target: HTMLElement): string[] {
 			return (
 				// is text node and has placeholders
 				childNode.nodeType === 3 &&
-				((childNode as any).nodeValue || '').match(/\{[^\{\}]*\}/g)
+				((childNode as any).nodeValue || '').match(regEx)
 			);
 		})
 		.forEach((childNode) => {
 			((childNode as any).nodeValue || '')
-				.match(/\{[^\{\}]*\}/g)
+				.match(regEx)
 				.forEach((placeholder: string) => {
 					placeholders.add(placeholder.replace(/[\{\}]/g, ''));
 				});
@@ -159,9 +158,10 @@ function getPlaceholderElements(
 function makePlaceHolders(
 	element: HTMLElement | DocumentFragment | ShadowRoot
 ): void {
-	getPlaceholderElements(element).forEach((e) =>
-		DC.add(e, '_placeholders', new Placeholders(e))
-	);
+	getPlaceholderElements(element).forEach((e: HTMLElement) => {
+		if ((e as HTMLMcElement)?._mc?._placeholders) return;
+		DC.add(e, '_placeholders', new Placeholders(e));
+	});
 }
 
 export type Observable = {
@@ -225,8 +225,7 @@ export const observe = (target: LooseObject, propertyName?: string) => {
 
 			bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
 				const that = this,
-					iso = isObservableObject(that.valueOf()),
-					bound = (that.constructor as any).bound;
+					iso = isObservableObject(that.valueOf());
 				//console.log('bind', iso, target);
 
 				if (iso) {

package/src/test.ts

@@ -1,7 +1,6 @@
 'use strict';
 
 import {
-	HTMLMcElement,
 	LooseObject,
 	MC,
 	DC,
@@ -48,13 +47,15 @@ class Translator extends DC {
 			}
 		});
 
-		(that.Translation as Observable).bind(target);
+		(that.Translation as Observable).bind(translationTargetObject);
 
 		this.target.setAttribute('language', 'en');
+
+		(this.Language as Observable).notify();
 	}
 
 	oneInit() {
-		(this.Language as Observable).notify(); // trigger translation
+		//(this.Language as Observable).notify(); // trigger translation
 	}
 
 	onAttributeChanged(ev: McEvent) {
@@ -74,7 +75,7 @@ defineCE(
 	// equivalent to custom element registry .define()
 	'my-tag',
 	class MyTag extends DC {
-		#template: string = '{lang.click} {counter}';
+		#template: string = '<button>{lang.click} {counter}</button>';
 
 		#languages = {
 			en: {
@@ -92,6 +93,9 @@ defineCE(
 
 			let that = this; // minifier help
 
+			// hide
+			target.setAttribute('style', 'display:none');
+
 			// render
 			target.innerHTML = this.#template;
 
@@ -114,6 +118,9 @@ defineCE(
 
 			// bind Dom to target
 			(that.Dom as Observable).bind(that.target);
+
+			// show
+			setTimeout(() => that.target.removeAttribute('style'), 100);
 		}
 
 		onAttributeChanged(ev: McEvent) {
@@ -123,6 +130,7 @@ defineCE(
 
 		onClick(ev: McEvent) {
 			this.Dom.counter++;
+			(this.target as HTMLElement).classList.add('clicked');
 		}
 	},
 	['language']
@@ -135,13 +143,11 @@ let MyTag: CustomElementConstructor = getCE('my-tag')!,
 stress test
 */
 
-/*
 let start = new Date().getTime();
 
-// create 1000 elements
-for (let x = 0; x < 1000; x++) {
-	let mt = new MyTag('my-data');
-	fragment.append(mt);
+// create 100 elements
+for (let x = 0; x < 100; x++) {
+	fragment.append(new MyTag());
 }
 
 let end = new Date().getTime();
@@ -149,8 +155,7 @@ let end = new Date().getTime();
 // and put them into the DOM
 document.body.appendChild(fragment);
 
-document.querySelectorAll('my-tag').forEach((e) => e.remove());
-*/
+//document.querySelectorAll('my-tag').forEach((e) => e.remove());
 
 /*
 console test
@@ -159,15 +164,13 @@ console test
 setTimeout(() => {
 	console.clear();
 
-	/*
 	console.log(
-		'%c \n\nStress Test:\n\n %cInstancing 1000 web components: %c %s ms.',
+		'%c \n\nStress Test:\n\n %cInstancing 100 web components: %c %s ms.',
 		'font-weight: bold; color: black;',
 		'font-weight: normal;',
 		'font-weight: bold; color: blue;',
-		0
+		end - start
 	);
-	*/
 
 	document.body.appendChild(new MyTag());
 
@@ -184,4 +187,4 @@ setTimeout(() => {
 
 	// will trigger the event on all micro components contained in <my-tag>
 	DC.trigger(element, 'doSomething');
-}, 20);
+}, 500);