@twobirds/microcomponents 0.0.37 → 0.0.41

package/public/test.js

@@ -23,11 +23,12 @@ class Translator extends DC {
                 that.Translation = { lang: that.#translations[lang] }; // set translation
             }
         });
-        that.Translation.bind(target);
+        that.Translation.bind(translationTargetObject);
         this.target.setAttribute('language', 'en');
+        this.Language.notify();
     }
     oneInit() {
-        this.Language.notify(); // trigger translation
+        //(this.Language as Observable).notify(); // trigger translation
     }
     onAttributeChanged(ev) {
         if (!ev.data.newValue)
@@ -43,7 +44,7 @@ class Translator extends DC {
 defineCE(
 // equivalent to custom element registry .define()
 'my-tag', class MyTag extends DC {
-    #template = '{lang.click} {counter}';
+    #template = '<button>{lang.click} {counter}</button>';
     #languages = {
         en: {
             click: 'click me',
@@ -56,6 +57,8 @@ defineCE(
     constructor(target) {
         super(target);
         let that = this; // minifier help
+        // hide
+        target.setAttribute('style', 'display:none');
         // render
         target.innerHTML = this.#template;
         // add public translator
@@ -69,53 +72,43 @@ defineCE(
         observe(that);
         // bind Dom to target
         that.Dom.bind(that.target);
+        // show
+        setTimeout(() => that.target.removeAttribute('style'), 100);
     }
     onAttributeChanged(ev) {
         //console.log(ev);
         this.target._mc.translator.Language = ev.data.newValue;
     }
     onClick(ev) {
-        this.Dom.counter++;
+        const that = this, c = this.Dom.counter++;
+        ev.data.stopPropagation();
+        this.target.classList.remove('clicked');
+        this.target.classList.add(that.Dom.counter > 9 ? 'overClicked' : 'clicked');
     }
 }, ['language']);
 let MyTag = getCE('my-tag'), fragment = new DocumentFragment();
 /*
 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();
-
 // 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
 */
 setTimeout(() => {
     console.clear();
-    /*
-    console.log(
-        '%c \n\nStress Test:\n\n %cInstancing 1000 web components: %c %s ms.',
-        'font-weight: bold; color: black;',
-        'font-weight: normal;',
-        'font-weight: bold; color: blue;',
-        0
-    );
-    */
+    console.log('%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;', end - start);
     document.body.appendChild(new MyTag());
     let element = document.querySelector('my-tag');
     console.log("\n\n%cInspect this tag:%c \n( ...to see the inner structure in the '._mc' property )\n\n %O %c %s", 'font-weight: bold;', 'font-weight: normal;', element, 'font-weight: bold;', '\n\nLook up code in the debugger: test.js\n\n');
     // will trigger the event on all micro components contained in <my-tag>
     DC.trigger(element, 'doSomething');
-}, 20);
+}, 500);
 //# sourceMappingURL=test.js.map

package/public/test.js.map

@@ -1 +1 @@
-{"version":3,"file":"test.js","sourceRoot":"","sources":["../src/test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../src/test.ts"],"names":[],"mappings":"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"}

package/public/types/observables.Observable.html

@@ -16,22 +16,22 @@
 <li><a href="../modules/observables.html">observables</a></li>
 <li><a href="observables.Observable.html">Observable</a></li></ul>
 <h1>Type alias Observable</h1></div>
-<div class="tsd-signature">Observable<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span><br/><span>    </span>bind<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>target<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span>    </span>notify<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span>    </span>observe<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>cb<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Callback</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></div>
+<div class="tsd-signature">Observable<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span><br/><span>    </span>bind<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>target<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">DocumentFragment</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span>    </span>notify<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span>    </span>observe<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>cb<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Callback</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></div>
 <div class="tsd-type-declaration">
 <h4>Type declaration</h4>
 <ul class="tsd-parameters">
 <li class="tsd-parameter">
-<h5>bind<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>target<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span></h5>
+<h5>bind<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>target<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">DocumentFragment</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span></h5>
 <ul class="tsd-parameters">
 <li class="tsd-parameter-signature">
 <ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-property">
-<li class="tsd-signature" id="__type.bind.__type-1.__type-2"><span class="tsd-signature-symbol">(</span>target<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
+<li class="tsd-signature" id="__type.bind.__type-1.__type-2"><span class="tsd-signature-symbol">(</span>target<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">DocumentFragment</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
 <li class="tsd-description">
 <div class="tsd-parameters">
 <h4 class="tsd-parameters-title">Parameters</h4>
 <ul class="tsd-parameter-list">
 <li>
-<h5>target: <span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span></h5></li></ul></div>
+<h5>target: <span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">DocumentFragment</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li>
 <li class="tsd-parameter">
 <h5>notify<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span></h5>
@@ -55,7 +55,7 @@
 <h5>cb: <span class="tsd-signature-type">Callback</span></h5></li></ul></div>
 <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4></li></ul></li></ul></li></ul></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/84a05c1/src/observables.ts#L344">src/observables.ts:344</a></li></ul></aside></div>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/a01d81a/src/observables.ts#L169">src/observables.ts:169</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

package/public/types/selectors.selection.html

@@ -18,7 +18,7 @@
 <h1>Type alias selection</h1></div>
 <div class="tsd-signature">selection<span class="tsd-signature-symbol">:</span> <a href="selectors.singleSelector.html" class="tsd-signature-type" data-tsd-kind="Type alias">singleSelector</a><span class="tsd-signature-symbol"> | </span><a href="selectors.singleSelector.html" class="tsd-signature-type" data-tsd-kind="Type alias">singleSelector</a><span class="tsd-signature-symbol">[]</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/84a05c1/src/selectors.ts#L1634">src/selectors.ts:1634</a></li></ul></aside></div>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/a01d81a/src/selectors.ts#L1634">src/selectors.ts:1634</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

package/public/types/selectors.singleSelector.html

@@ -18,7 +18,7 @@
 <h1>Type alias singleSelector</h1></div>
 <div class="tsd-signature">single<wbr/>Selector<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLCollection</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">NodeList</span><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selectors.DSelector.html" class="tsd-signature-type" data-tsd-kind="Interface">DSelector</a><span class="tsd-signature-symbol"> | </span><a href="../classes/MC.MC.html" class="tsd-signature-type" data-tsd-kind="Class">MC</a><span class="tsd-signature-symbol"> | </span><a href="../classes/MC.DC.html" class="tsd-signature-type" data-tsd-kind="Class">DC</a><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selectors.TSelector.html" class="tsd-signature-type" data-tsd-kind="Interface">TSelector</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">undefined</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/84a05c1/src/selectors.ts#L1632">src/selectors.ts:1632</a></li></ul></aside></div>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/a01d81a/src/selectors.ts#L1632">src/selectors.ts:1632</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

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, ''));
 				});
@@ -150,7 +149,9 @@ class Placeholders extends DC {
 function getPlaceholderElements(
 	target: HTMLElement | DocumentFragment | ShadowRoot
 ): HTMLElement[] {
-	let elements: Array<HTMLElement | DocumentFragment | ShadowRoot> = [target]
+	let elements: Array<HTMLElement> = (
+		target instanceof HTMLElement ? [target] : []
+	)
 		.concat([...(target.querySelectorAll('*') as unknown as HTMLElement[])])
 		.filter((e) => !!getPlaceholders(e as HTMLElement).length);
 	return elements as HTMLElement[];
@@ -159,9 +160,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,14 +227,19 @@ 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) {
 					makePlaceHolders(target);
 					(this.constructor as any).callbacks.push((data: LooseObject) => {
-						DC.trigger(target, 'data', flattenObject(data), 'ld');
+						// avoid bubbling for speed
+						new DC(target as HTMLMcElement)
+							.descendants('_placeholders')
+							.forEach((e) => {
+								if (!e) return;
+								e.trigger('data', flattenObject(data));
+							});
 					});
 					that.notify();
 				} else {

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) {
@@ -122,7 +129,13 @@ defineCE(
 		}
 
 		onClick(ev: McEvent) {
-			this.Dom.counter++;
+			const that = this,
+				c = this.Dom.counter++;
+			(ev.data as PointerEvent).stopPropagation();
+			(this.target as HTMLElement).classList.remove('clicked');
+			(this.target as HTMLElement).classList.add(
+				that.Dom.counter > 9 ? 'overClicked' : 'clicked'
+			);
 		}
 	},
 	['language']
@@ -135,13 +148,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 +160,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 +169,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 +192,4 @@ setTimeout(() => {
 
 	// will trigger the event on all micro components contained in <my-tag>
 	DC.trigger(element, 'doSomething');
-}, 20);
+}, 500);