@twobirds/microcomponents 0.0.45 → 0.0.48

package/public/src/observables.ts

@@ -70,17 +70,14 @@ class Placeholders extends DC {
 		let that = this;
 		getPlaceholders(target).forEach((property) => (that.data[property] = ''));
 		observe(that);
-		that.oldDisplay = target.style.display;
-		if (!inputs.includes((target as any).constructor)) {
-			target.style.display = 'none';
-		}
 		that.#attachCallbacks();
 		delete that._mc; // cleanup, not needed
 	}
 
 	#attachCallbacks() {
 		let that = this,
-			target = that.target;
+			target = that.target,
+			hide: boolean = false;
 
 		// console.log('attachCallbacks', that.target);
 
@@ -120,6 +117,7 @@ class Placeholders extends DC {
 				);
 			})
 			.forEach((childNode) => {
+				hide = true;
 				let phs: Set<string> = new Set(
 					childNode.nodeValue.match(/\{[^\{\}]*\}/g)
 				);
@@ -139,12 +137,22 @@ class Placeholders extends DC {
 								return !!data[key];
 							})
 						) {
-							target.style.display = that.oldDisplay;
+							if (!!that.oldDisplay) {
+								target.style = that.oldDisplay;
+							} else {
+								target.removeAttribute('style');
+							}
 							delete that.oldDisplay;
 						}
 						childNode.nodeValue = result;
 					})(childNode.nodeValue)
 				);
+
+				// hide for now
+				that.oldDisplay = target.getAttribute('style)') || '';
+				if (hide && !inputs.includes((target as any).constructor)) {
+					target.style.display = 'none';
+				}
 			});
 	}
 
@@ -226,7 +234,6 @@ export const observe = (target: LooseObject, propertyName?: string) => {
 				(this.constructor as LooseObject).callbacks = [];
 				if (isObservableObject(val)) {
 					// you cannot bind native values to the dom
-					(this.constructor as LooseObject).bound = [];
 					Object.getOwnPropertyNames(val).forEach((key) => {
 						this[key] = val[key];
 					});
@@ -274,18 +281,10 @@ export const observe = (target: LooseObject, propertyName?: string) => {
 						that.valueOf() instanceof Array === false
 							? structuredClone(Object.assign({}, that))
 							: that.valueOf();
-				// console.log('notify', that.constructor, (that.constructor as any).callbacks.length, (that.constructor as any)?.bound?.length, data );
 				(that.constructor as any).callbacks.forEach((f: Function) => {
 					// console.log( 'callback', f, data);
 					f(data);
 				});
-				if (isObservableObject(that.valueOf())) {
-					// console.log('bound', this.constructor);
-					(that.constructor as any).bound.forEach((f: Function) => {
-						// console.log( 'bound', f, data);
-						f(data);
-					});
-				}
 				return this;
 			}
 		};
@@ -326,14 +325,12 @@ export const observe = (target: LooseObject, propertyName?: string) => {
 
 						let hasFormHandler =
 								(o.constructor as LooseObject)?.hasFormHandler ?? false,
-							callbacks = (o.constructor as LooseObject).callbacks,
-							bound = (o.constructor as LooseObject).bound;
+							callbacks = (o.constructor as LooseObject).callbacks;
 						o = new Observable(structuredClone(Object.assign({}, val)));
 
 						//console.log('after set o=', o, 'check', old);
 						(o.constructor as LooseObject).callbacks = hasFormHandler;
 						(o.constructor as LooseObject).callbacks = callbacks;
-						(o.constructor as LooseObject).bound = bound;
 
 						setTimeout(
 							// check for changes

package/public/src/test.ts

@@ -42,21 +42,18 @@ class Translator extends DC {
 
 		(that.Translation as Observable).bind(translationTargetObject);
 
-		this.target.setAttribute('language', 'en');
+		that.target.setAttribute('language', 'en');
 
-		(this.Language as Observable).notify();
+		(that.Language as Observable).notify();
 
 		delete that._mc; // cleanup, not needed
 	}
 
 	onAttributeChanged(ev: McEvent) {
 		if (!ev.data.newValue) return;
-
-		let that = this;
-
 		switch (ev.data.name) {
 			case 'language':
-				that.Language = ev.data.newValue;
+				this.Language = ev.data.newValue;
 				break;
 		}
 	}
@@ -110,16 +107,12 @@ defineCE(
 			(that.Dom as Observable).bind(that.target);
 		}
 
-		onAttributeChanged(ev: McEvent) {
-			this.target._mc.translator.Language = ev.data.newValue;
-		}
-
 		onClick(ev: McEvent) {
 			const that = this,
-				c = this.Dom.counter++;
+				c = that.Dom.counter++;
 			(ev.data as PointerEvent).stopPropagation();
-			(this.target as HTMLElement).classList.remove('clicked');
-			(this.target as HTMLElement).classList.add(
+			(that.target as HTMLElement).classList.remove('clicked');
+			(that.target as HTMLElement).classList.add(
 				that.Dom.counter > 9 ? 'overClicked' : 'clicked'
 			);
 		}

package/public/test.js

@@ -6,38 +6,32 @@ class Translator extends DC {
     Translation = {};
     constructor(target, translations, translationTargetObject) {
         super(target);
-        let that = this; // minifier help
-        // state
+        let that = this;
         that.Language = 'en';
         that.Translation = {};
         observe(that);
-        // setup
         that.#translations = translations;
-        // state
         that.Language.observe((lang) => {
             if (that.#translations.hasOwnProperty(lang)) {
-                that.Translation = { lang: that.#translations[lang] }; // set translation
+                that.Translation = { lang: that.#translations[lang] };
             }
         });
         that.Translation.bind(translationTargetObject);
-        this.target.setAttribute('language', 'en');
-        this.Language.notify();
-        delete that._mc; // cleanup, not needed
+        that.target.setAttribute('language', 'en');
+        that.Language.notify();
+        delete that._mc;
     }
     onAttributeChanged(ev) {
         if (!ev.data.newValue)
             return;
-        let that = this;
         switch (ev.data.name) {
             case 'language':
-                that.Language = ev.data.newValue;
+                this.Language = ev.data.newValue;
                 break;
         }
     }
 }
-defineCE(
-// equivalent to custom element registry .define()
-'my-tag', class MyTag extends DC {
+defineCE('my-tag', class MyTag extends DC {
     #template = '<button>{lang.click} {counter}</button>';
     #languages = {
         en: {
@@ -50,55 +44,36 @@ defineCE(
     Dom = {};
     constructor(target) {
         super(target);
-        let that = this; // minifier help
-        // render
+        let that = this;
         target.innerHTML = this.#template;
-        // add translator
         DC.add(target, 'translator', new Translator(target, that.#languages, target));
-        delete that._mc; // cleanup, not needed
+        delete that._mc;
     }
     oneInit(ev) {
         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.bind(that.target);
     }
-    onAttributeChanged(ev) {
-        this.target._mc.translator.Language = ev.data.newValue;
-    }
     onClick(ev) {
-        const that = this, c = this.Dom.counter++;
+        const that = this, c = that.Dom.counter++;
         ev.data.stopPropagation();
-        this.target.classList.remove('clicked');
-        this.target.classList.add(that.Dom.counter > 9 ? 'overClicked' : 'clicked');
+        that.target.classList.remove('clicked');
+        that.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 100 elements
 for (let x = 0; x < 1000; 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());
-/*
-console test
-*/
 setTimeout(() => {
-    // console.clear();
     console.log('%c \n\nStress Test:\n\n %cInstancing 1000 web components (3000 classes): %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');
 }, 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

@@ -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/a01d81a/src/observables.ts#L169">src/observables.ts:169</a></li></ul></aside></div>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/b10756d/src/observables.ts#L185">src/observables.ts:185</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/a01d81a/src/selectors.ts#L1634">src/selectors.ts:1634</a></li></ul></aside></div>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/b10756d/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/a01d81a/src/selectors.ts#L1632">src/selectors.ts:1632</a></li></ul></aside></div>
+<li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/b10756d/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/observables.ts

@@ -70,17 +70,14 @@ class Placeholders extends DC {
 		let that = this;
 		getPlaceholders(target).forEach((property) => (that.data[property] = ''));
 		observe(that);
-		that.oldDisplay = target.style.display;
-		if (!inputs.includes((target as any).constructor)) {
-			target.style.display = 'none';
-		}
 		that.#attachCallbacks();
 		delete that._mc; // cleanup, not needed
 	}
 
 	#attachCallbacks() {
 		let that = this,
-			target = that.target;
+			target = that.target,
+			hide: boolean = false;
 
 		// console.log('attachCallbacks', that.target);
 
@@ -120,6 +117,7 @@ class Placeholders extends DC {
 				);
 			})
 			.forEach((childNode) => {
+				hide = true;
 				let phs: Set<string> = new Set(
 					childNode.nodeValue.match(/\{[^\{\}]*\}/g)
 				);
@@ -139,12 +137,22 @@ class Placeholders extends DC {
 								return !!data[key];
 							})
 						) {
-							target.style.display = that.oldDisplay;
+							if (!!that.oldDisplay) {
+								target.style = that.oldDisplay;
+							} else {
+								target.removeAttribute('style');
+							}
 							delete that.oldDisplay;
 						}
 						childNode.nodeValue = result;
 					})(childNode.nodeValue)
 				);
+
+				// hide for now
+				that.oldDisplay = target.getAttribute('style)') || '';
+				if (hide && !inputs.includes((target as any).constructor)) {
+					target.style.display = 'none';
+				}
 			});
 	}
 
@@ -226,7 +234,6 @@ export const observe = (target: LooseObject, propertyName?: string) => {
 				(this.constructor as LooseObject).callbacks = [];
 				if (isObservableObject(val)) {
 					// you cannot bind native values to the dom
-					(this.constructor as LooseObject).bound = [];
 					Object.getOwnPropertyNames(val).forEach((key) => {
 						this[key] = val[key];
 					});
@@ -274,18 +281,10 @@ export const observe = (target: LooseObject, propertyName?: string) => {
 						that.valueOf() instanceof Array === false
 							? structuredClone(Object.assign({}, that))
 							: that.valueOf();
-				// console.log('notify', that.constructor, (that.constructor as any).callbacks.length, (that.constructor as any)?.bound?.length, data );
 				(that.constructor as any).callbacks.forEach((f: Function) => {
 					// console.log( 'callback', f, data);
 					f(data);
 				});
-				if (isObservableObject(that.valueOf())) {
-					// console.log('bound', this.constructor);
-					(that.constructor as any).bound.forEach((f: Function) => {
-						// console.log( 'bound', f, data);
-						f(data);
-					});
-				}
 				return this;
 			}
 		};
@@ -326,14 +325,12 @@ export const observe = (target: LooseObject, propertyName?: string) => {
 
 						let hasFormHandler =
 								(o.constructor as LooseObject)?.hasFormHandler ?? false,
-							callbacks = (o.constructor as LooseObject).callbacks,
-							bound = (o.constructor as LooseObject).bound;
+							callbacks = (o.constructor as LooseObject).callbacks;
 						o = new Observable(structuredClone(Object.assign({}, val)));
 
 						//console.log('after set o=', o, 'check', old);
 						(o.constructor as LooseObject).callbacks = hasFormHandler;
 						(o.constructor as LooseObject).callbacks = callbacks;
-						(o.constructor as LooseObject).bound = bound;
 
 						setTimeout(
 							// check for changes

package/src/test.ts

@@ -42,21 +42,18 @@ class Translator extends DC {
 
 		(that.Translation as Observable).bind(translationTargetObject);
 
-		this.target.setAttribute('language', 'en');
+		that.target.setAttribute('language', 'en');
 
-		(this.Language as Observable).notify();
+		(that.Language as Observable).notify();
 
 		delete that._mc; // cleanup, not needed
 	}
 
 	onAttributeChanged(ev: McEvent) {
 		if (!ev.data.newValue) return;
-
-		let that = this;
-
 		switch (ev.data.name) {
 			case 'language':
-				that.Language = ev.data.newValue;
+				this.Language = ev.data.newValue;
 				break;
 		}
 	}
@@ -110,16 +107,12 @@ defineCE(
 			(that.Dom as Observable).bind(that.target);
 		}
 
-		onAttributeChanged(ev: McEvent) {
-			this.target._mc.translator.Language = ev.data.newValue;
-		}
-
 		onClick(ev: McEvent) {
 			const that = this,
-				c = this.Dom.counter++;
+				c = that.Dom.counter++;
 			(ev.data as PointerEvent).stopPropagation();
-			(this.target as HTMLElement).classList.remove('clicked');
-			(this.target as HTMLElement).classList.add(
+			(that.target as HTMLElement).classList.remove('clicked');
+			(that.target as HTMLElement).classList.add(
 				that.Dom.counter > 9 ? 'overClicked' : 'clicked'
 			);
 		}