@twobirds/microcomponents 0.0.48 → 0.0.51

package/src/observables.ts

@@ -2,11 +2,10 @@
 
 import {
 	LooseObject,
-	parse,
 	debounce,
 	deepEqual,
-	nameSpace,
 	flattenObject,
+	copyGettersSetters,
 } from './helpers.js';
 
 import { DC, HTMLMcElement, McEvent } from './MC.js';
@@ -79,7 +78,7 @@ class Placeholders extends DC {
 			target = that.target,
 			hide: boolean = false;
 
-		// console.log('attachCallbacks', that.target);
+		//console.log('attachCallbacks', that.target);
 
 		// scan attributes
 		target
@@ -126,6 +125,7 @@ class Placeholders extends DC {
 				that.data.observe(
 					((template: string) => (data: LooseObject) => {
 						let result: string = template;
+						//console.log('text node "', template, '" callbach data:', data);
 						phs.forEach((placeholder) => {
 							result = result.replace(
 								placeholder,
@@ -150,7 +150,11 @@ class Placeholders extends DC {
 
 				// hide for now
 				that.oldDisplay = target.getAttribute('style)') || '';
-				if (hide && !inputs.includes((target as any).constructor)) {
+				if (
+					hide &&
+					!inputs.includes((target as any).constructor) &&
+					target.tagName !== 'FIELDSET'
+				) {
 					target.style.display = 'none';
 				}
 			});
@@ -162,7 +166,7 @@ class Placeholders extends DC {
 		Object.keys(ev.data).forEach((key) => {
 			if (that.data.hasOwnProperty(key)) data[key] = ev.data[key];
 		});
-		// console.log('onData()', ev, data, that.data);
+		//console.log('onData()', ev, data, that.data);
 		if (JSON.stringify(data) !== JSON.stringify(that.data))
 			Object.assign(that.data, data); // will trigger callbacks
 	}
@@ -175,13 +179,16 @@ function getPlaceholderElements(
 		target instanceof HTMLElement ? [target] : []
 	)
 		.concat([...(target.querySelectorAll('*') as unknown as HTMLElement[])])
-		.filter((e) => !!getPlaceholders(e as HTMLElement).length);
+		.filter((e) => !!getPlaceholders(e as HTMLElement).length)
+		.filter((e) => e.tagName !== 'STYLE');
+	//console.log('getPlaceholderElements', elements);
 	return elements as HTMLElement[];
 }
 
-function makePlaceHolders(
+function makePlaceholders(
 	element: HTMLElement | DocumentFragment | ShadowRoot
 ): void {
+	//console.log('makePlaceholders', element);
 	getPlaceholderElements(element).forEach((e: HTMLElement) => {
 		if ((e as HTMLMcElement)?._mc?._placeholders) return;
 		DC.add(e, '_placeholders', new Placeholders(e));
@@ -194,14 +201,17 @@ export type Observable = {
 	bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void;
 };
 
-export const observe = (target: LooseObject, propertyName?: string) => {
+export const observe = (
+	target: LooseObject,
+	propertyName?: string
+): LooseObject => {
 	let keys = !propertyName
 		? [...Object.getOwnPropertyNames(target)]
 		: [propertyName];
 
 	keys.forEach((key) => {
 		// console.log( 'co propname', key, typeof target[key], target[key] );
-		if (key[0] === '_' || target?.[key] === undefined) return;
+		if (key[0] === '_' || target?.[key] === undefined) return target;
 		let val: any = target[key],
 			Constructor: any;
 
@@ -229,6 +239,8 @@ export const observe = (target: LooseObject, propertyName?: string) => {
 		}
 
 		let Observable = class extends Constructor {
+			#notify: boolean = true;
+
 			constructor(val: any) {
 				super(val);
 				(this.constructor as LooseObject).callbacks = [];
@@ -252,16 +264,22 @@ export const observe = (target: LooseObject, propertyName?: string) => {
 				//console.log('bind', iso, target);
 
 				if (iso) {
-					makePlaceHolders(target);
-					(this.constructor as any).callbacks.push((data: LooseObject) => {
+					makePlaceholders(target);
+					const placeholders: unknown = [
+						...target.querySelectorAll('[_mc]'),
+					].filter((e) => !!(e as LooseObject)?._mc?._placeholders);
+					//console.log('placeholders:', target, placeholders);
+					const func = function callback(data: LooseObject) {
 						// avoid bubbling for speed
-						new DC(target as HTMLMcElement)
-							.descendants('_placeholders')
-							.forEach((e) => {
-								if (!e) return;
-								e.trigger('data', flattenObject(data));
-							});
-					});
+						let d = flattenObject(data);
+						//console.log('inside callback', target, d);
+						(placeholders as DC[]).forEach((e) => {
+							// console.log('trigger callback', e);
+							if (!e) return;
+							(e as any)._mc.trigger('data', d);
+						});
+					};
+					(that.constructor as any).callbacks.push(func);
 					that.notify();
 				} else {
 					console.warn(
@@ -274,22 +292,34 @@ export const observe = (target: LooseObject, propertyName?: string) => {
 				return this;
 			}
 
-			notify() {
+			notify(notify?: boolean) {
 				let that = this,
 					data =
 						isObservableObject(that.valueOf()) &&
 						that.valueOf() instanceof Array === false
 							? structuredClone(Object.assign({}, that))
 							: that.valueOf();
+
+				if (notify !== undefined) {
+					that.#notify = notify;
+					// return;
+				}
+
+				//if (that.#notify) console.log('notify', this, data);
 				(that.constructor as any).callbacks.forEach((f: Function) => {
-					// console.log( 'callback', f, data);
+					// console.log(
+					// 	(this.constructor as any).callbacks,
+					// 	'notify: exec callback',
+					// 	f,
+					// 	data
+					// );
 					f(data);
 				});
-				return this;
+
+				return that;
 			}
 		};
 
-		//(Observable.constructor as LooseObject).callbacks = [];
 		let o = new Observable(val);
 
 		Object.defineProperty(target, key, {
@@ -317,20 +347,21 @@ export const observe = (target: LooseObject, propertyName?: string) => {
 					let iso =
 						isObservableObject(o.valueOf()) &&
 						o.valueOf() instanceof Array === false;
-					//let iso = o.constructor.prototype.__proto__.constructor === Object;
 					//console.log('target iso:', iso);
 					if (iso) {
 						let old = structuredClone(Object.assign({}, o));
-						val = structuredClone(Object.assign({}, val));
+						//val = structuredClone(Object.assign({}, val));
 
-						let hasFormHandler =
-								(o.constructor as LooseObject)?.hasFormHandler ?? false,
-							callbacks = (o.constructor as LooseObject).callbacks;
-						o = new Observable(structuredClone(Object.assign({}, val)));
+						//let callbacks = (o.constructor as LooseObject).callbacks;
+						if (o instanceof Observable === false) {
+							o = new Observable(structuredClone(Object.assign({}, val)));
+							copyGettersSetters(val, o);
+							o.seal();
+						}
+						Object.assign(o, val);
 
-						//console.log('after set o=', o, 'check', old);
-						(o.constructor as LooseObject).callbacks = hasFormHandler;
-						(o.constructor as LooseObject).callbacks = callbacks;
+						// console.log('after set o=', o, 'check', old);
+						// (o.constructor as LooseObject).callbacks = callbacks;
 
 						setTimeout(
 							// check for changes
@@ -369,4 +400,6 @@ export const observe = (target: LooseObject, propertyName?: string) => {
 		// replace old property with proxy (observable)
 		target[key] = val;
 	});
+
+	return target;
 };

package/src/test/Child.ts

@@ -0,0 +1,21 @@
+import { DC, defineCE, getCE } from '.././microcomponents.js';
+import { TestGrandchild } from './Grandchild.js';
+defineCE(
+	'test-child',
+
+	class TestChild extends DC {
+		constructor(target: HTMLElement) {
+			super(target);
+		}
+
+		onConnected() {
+			let that = this;
+
+			for (let x = 0; x < 10; x++) {
+				that.target.append(new TestGrandchild!());
+			}
+		}
+	}
+);
+
+export const TestChild = getCE('test-child');

package/src/test/Grandchild.ts

@@ -0,0 +1,21 @@
+import { DC, defineCE, getCE } from '.././microcomponents.js';
+import { TestGreatgrandchild } from './Greatgrandchild.js';
+defineCE(
+	'test-grandchild',
+
+	class TestGrandchild extends DC {
+		constructor(target: HTMLElement) {
+			super(target);
+		}
+
+		onConnected() {
+			let that = this;
+
+			for (let x = 0; x < 2; x++) {
+				that.target.append(new TestGreatgrandchild!());
+			}
+		}
+	}
+);
+
+export const TestGrandchild = getCE('test-grandchild');

package/src/test/Grandparent.css

@@ -0,0 +1,11 @@
+test-grandparent,
+test-parent,
+test-child,
+test-grandchild,
+test-greatgrandchild {
+	display: inline-block;
+	padding: 1px;
+	margin: 1px;
+	border: 1px solid darkslategray;
+	border-radius: 2px;
+}

package/src/test/Grandparent.ts

@@ -0,0 +1,21 @@
+import { DC, defineCE, getCE } from '.././microcomponents.js';
+import { TestParent } from './Parent.js';
+defineCE(
+	'test-grandparent',
+
+	class TestGrandparent extends DC {
+		constructor(target: HTMLElement) {
+			super(target);
+		}
+
+		onConnected() {
+			let that = this;
+
+			for (let x = 0; x < 5; x++) {
+				that.target.append(new TestParent!());
+			}
+		}
+	}
+);
+
+export const TestGrandparent = getCE('test-grandparent');

package/src/test/Greatgrandchild.ts

@@ -0,0 +1,42 @@
+import { DC, defineCE, getCE } from '.././microcomponents.js';
+
+function random(min: number, max: number) {
+	var random = Math.floor(Math.random() * (max - min + 1) + min);
+	return random;
+}
+
+defineCE(
+	'test-greatgrandchild',
+
+	class TestGreatgrandchild extends DC {
+		constructor(target: HTMLElement) {
+			super(target);
+		}
+
+		onConnected() {
+			let that = this;
+
+			that.updateStyle();
+		}
+
+		updateStyle() {
+			var that = this;
+
+			function randomBorderColor() {
+				return (
+					'rgb(' +
+					random(0, 255) +
+					',' +
+					random(0, 255) +
+					',' +
+					random(0, 255) +
+					')'
+				);
+			}
+
+			that.target.setAttribute('style', 'border-color:' + randomBorderColor());
+		}
+	}
+);
+
+export const TestGreatgrandchild = getCE('test-greatgrandchild');

package/src/test/Parent.ts

@@ -0,0 +1,21 @@
+import { DC, defineCE, getCE } from '.././microcomponents.js';
+import { TestChild } from './Child.js';
+defineCE(
+	'test-parent',
+
+	class TestParent extends DC {
+		constructor(target: HTMLElement) {
+			super(target);
+		}
+
+		onConnected() {
+			let that = this;
+
+			for (let x = 0; x < 5; x++) {
+				that.target.append(new TestChild!());
+			}
+		}
+	}
+);
+
+export const TestParent = getCE('test-parent');

package/src/test/Testform.css

@@ -0,0 +1,47 @@
+legend {
+    display: inherit;
+    margin:  inherit;
+    vertical-align:  inherit;
+}
+
+label {
+    display: inline;
+    margin-top: 5px;
+    margin-left: 5px;
+    vertical-align: top;
+    width: 10em;
+    text-align: right;
+}
+
+label::before {
+    content: ' ';
+    display: block;
+}
+
+form input,
+form select,
+form textarea {
+    margin-left: 5px;
+    margin-top: 0px;
+    display: inline;
+}
+
+form label + textarea {
+    display: inline-block;
+    margin-top: 3px;
+}
+
+form input + label {
+    width: inherit;
+    margin-top: 3px;
+    text-align: left;
+}
+
+body > form {
+    display: block;
+}
+
+form fieldset {
+    border: 1px solid darkslategrey;
+    border-radius: 3px;
+}

package/src/test/Testform.html

@@ -0,0 +1,56 @@
+<!-- test form -->
+<fieldset>
+    <legend>Inputs</legend>
+    <label>text</label><input type="text" name="textInput" value="" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}
+    <label>color</label><input type="color" name="colorInput" value="" />
+    <label>date</label><input type="date" name="dateInput" value="" />
+    <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />
+    <label>email</label><input type="email" name="email" value="" />
+    <label>file</label><input type="file" name="fileInput" value="" />
+    <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />
+    <label>month</label><input type="month" name="month" value="" />
+    <label>number</label><input type="number" name="number" value="" />
+    <label>password</label><input type="password" name="passInput" value="" />
+    <label>range</label><input type="range" name="rangeInput" value="" />
+    <label>search</label><input type="search" name="searchInput" value="" />
+    <label>tel</label><input type="tel" name="telInput" value="" />
+    <label>time</label><input type="time" name="timeInput" value="" />
+    <label>url</label><input type="url" name="urlInput" value="" />
+    <label>week</label><input type="week" name="weekInput" value="" />
+</fieldset>
+<fieldset>
+    <legend>Selects</legend>
+        <label>singleSelect</label>
+        <select name="singleSelect">
+            <option disabled selected value> -- select -- </option>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <option value="3">Option 3</option>
+            <option value="4">Option 4</option>
+        </select>
+        <label>multiSelect</label>
+        <select name="multiSelect" multiple="multiple" type="select-multiple">
+            <option value="1">Option 1</option>
+            <option value="2" selected=true>Option 2</option>
+            <option value="3">Option 3</option>
+            <option value="4" selected=true>Option 4</option>
+        </select>
+</fieldset>
+<fieldset>
+    <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong>{myRadio}</legend>
+    <label>radio1</label><input type="radio" name="myRadio" value="radio1">
+    <label>radio2</label><input type="radio" name="myRadio" value="radio2">
+    <label>radio3</label><input type="radio" name="myRadio" value="radio3">
+</fieldset>
+<fieldset>
+    <legend>Checkboxes</legend>
+    <label>cb1</label><input type="checkbox" name="cb1">
+    <label>cb2</label><input type="checkbox" name="cb2">
+    <label>cb3</label><input type="checkbox" name="cb3">
+    <label>cb4</label><input type="checkbox" name="cb4">
+    <label>cb5</label><input type="checkbox" name="cb5">
+</fieldset>
+<fieldset>
+    <legend>TextArea</legend>
+    <label>textArea</label><textarea name="textArea"></textarea>
+</fieldset>

package/src/test/Testform.json

@@ -0,0 +1,27 @@
+{
+	"textInput":"Hallo Welt",
+	"colorInput":"#eaf8f8",
+	"dateInput":"",
+	"dtlInput":"",
+	"email":"",
+	"hiddenInput":"",
+	"hiddenVal":"",
+	"month":"",
+	"number":"",
+	"passInput":"",
+	"rangeInput":"30",
+	"searchInput":"",
+	"telInput":"",
+	"timeInput":"",
+	"urlInput":"",
+	"weekInput":"",
+	"myRadio":"radio3",
+	"cb1":true,
+	"cb2":false,
+	"cb3":true,
+	"cb4":false,
+	"cb5":false,
+	"singleSelect":"",
+	"multiSelect":["2","4"],
+	"textArea":"This is some example\rtext..."
+}

package/src/test/Testform.ts

@@ -0,0 +1,159 @@
+'use strict';
+import { DC, defineCE, Observable, FormValues } from '.././microcomponents.js';
+
+defineCE(
+	'test-testform',
+
+	class TestTestForm extends DC {
+		data: unknown;
+
+		constructor(target: HTMLElement) {
+			super(target);
+
+			const that = this;
+
+			delete this._mc;
+
+			let shadow = (that as DC).target.attachShadow({ mode: 'open' });
+			shadow.innerHTML = `<style>${this.css}</style>${this.template}`;
+
+			new FormValues(that, 'data', shadow);
+
+			(that.data as Observable).bind(shadow);
+		}
+
+		onConnected() {}
+
+		oneInit() {
+			let that = this;
+		}
+
+		get template() {
+			return /*html*/ `
+                <form>
+                    <!-- sample form to start with -->
+                    <fieldset>
+                        <legend>Inputs</legend>
+                        <label>text</label><input type="text" name="textInput" value="Hallo" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}
+                        <label>color</label><input type="color" name="colorInput" value="" />
+                        <label>date</label><input type="date" name="dateInput" value="" />
+                        <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />
+                        <label>email</label><input type="email" name="email" value="" />
+                        <label>file</label><input type="file" name="fileInput" value="" />
+                        <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />
+                        <label>month</label><input type="month" name="month" value="" />
+                        <label>number</label><input type="number" name="number" value="" />
+                        <label>password</label><input type="password" name="passInput" value="" />
+                        <label>range</label><input type="range" name="rangeInput" value="" />
+                        <label>search</label><input type="search" name="searchInput" value="" />
+                        <label>tel</label><input type="tel" name="telInput" value="" />
+                        <label>time</label><input type="time" name="timeInput" value="" />
+                        <label>url</label><input type="url" name="urlInput" value="" />
+                        <label>week</label><input type="week" name="weekInput" value="" />
+                    </fieldset>
+
+                    <fieldset>
+                        <legend>Selects</legend>
+
+                            <label>singleSelect</label>
+                            <select name="singleSelect">
+                                <option disabled selected value> -- select -- </option>
+                                <option value="1">Option 1</option>
+                                <option value="2">Option 2</option>
+                                <option value="3">Option 3</option>
+                                <option value="4">Option 4</option>
+                            </select>
+
+                            <label>multiSelect</label>
+                            <select name="multiSelect" multiple="multiple" type="select-multiple">
+                                <option value="1">Option 1</option>
+                                <option value="2" selected=true>Option 2</option>
+                                <option value="3">Option 3</option>
+                                <option value="4" selected=true>Option 4</option>
+                            </select>
+
+                    </fieldset>
+
+                    <fieldset>
+                        <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong><span>{myRadio}</span></legend>
+
+                        <label>radio1</label><input type="radio" name="myRadio" value="radio1">
+                        <label>radio2</label><input type="radio" name="myRadio" value="radio2">
+                        <label>radio3</label><input type="radio" name="myRadio" value="radio3">
+
+                    </fieldset>
+
+                    <fieldset>
+                        <legend>Checkboxes</legend>
+                        <label>cb1</label><input type="checkbox" name="cb1">
+                        <label>cb2</label><input type="checkbox" name="cb2">
+                        <label>cb3</label><input type="checkbox" name="cb3">
+                        <label>cb4</label><input type="checkbox" name="cb4">
+                        <label>cb5</label><input type="checkbox" name="cb5">
+
+                    </fieldset>
+
+                    <fieldset>
+                        <legend>TextArea</legend>
+                        <label>textArea</label>
+                        <textarea name="textArea">abc</textarea>
+                    </fieldset>
+
+                </form>
+            `;
+		}
+
+		get css() {
+			return /*css*/ `
+legend {
+    display: inherit;
+    margin:  inherit;
+    vertical-align:  inherit;
+}
+
+label {
+    display: inline;
+    margin-top: 5px;
+    margin-left: 5px;
+    vertical-align: top;
+    width: 10em;
+    text-align: right;
+}
+
+label::before {
+    content: ' ';
+    display: block;
+}
+
+form input,
+form select,
+form textarea {
+    margin-left: 5px;
+    margin-top: 0px;
+    display: inline;
+}
+
+form label + textarea {
+    display: inline-block;
+    margin-top: 3px;
+}
+
+form input + label {
+    width: inherit;
+    margin-top: 3px;
+    text-align: left;
+}
+
+body > form {
+    display: block;
+}
+
+form fieldset {
+    border: 1px solid darkslategrey;
+    border-radius: 3px;
+    margin: 0.5em 0;
+}
+            `;
+		}
+	}
+);

package/src/test.ts

@@ -127,10 +127,11 @@ let MyTag: CustomElementConstructor = getCE('my-tag')!,
 stress test
 */
 
-let start = new Date().getTime();
+let start = new Date().getTime(),
+	max = 100;
 
-// create 100 elements
-for (let x = 0; x < 1000; x++) {
+// create 1000 elements
+for (let x = 0; x < max; x++) {
 	fragment.append(new MyTag());
 }
 
@@ -149,14 +150,16 @@ setTimeout(() => {
 	// console.clear();
 
 	console.log(
-		'%c \n\nStress Test:\n\n %cInstancing 1000 web components (3000 classes): %c %s ms.',
+		'%c \n\nStress Test:\n\n %cInstancing %s web components (%s classes): %c %s ms.',
 		'font-weight: bold; color: black;',
 		'font-weight: normal;',
+		max,
+		max * 3,
 		'font-weight: bold; color: blue;',
 		end - start
 	);
 
-	document.body.appendChild(new MyTag());
+	//document.body.appendChild(new MyTag());
 
 	let element = document.querySelector('my-tag');