@twobirds/microcomponents 0.0.84 → 0.0.86

package/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);