@twobirds/microcomponents 0.0.46 → 0.0.50

package/public/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';
@@ -76,9 +75,10 @@ class Placeholders extends DC {
 
 	#attachCallbacks() {
 		let that = this,
-			target = that.target;
+			target = that.target,
+			hide: boolean = false;
 
-		// console.log('attachCallbacks', that.target);
+		//console.log('attachCallbacks', that.target);
 
 		// scan attributes
 		target
@@ -116,6 +116,7 @@ class Placeholders extends DC {
 				);
 			})
 			.forEach((childNode) => {
+				hide = true;
 				let phs: Set<string> = new Set(
 					childNode.nodeValue.match(/\{[^\{\}]*\}/g)
 				);
@@ -124,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,
@@ -135,7 +137,11 @@ 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;
@@ -144,7 +150,11 @@ class Placeholders extends DC {
 
 				// hide for now
 				that.oldDisplay = target.getAttribute('style)') || '';
-				if (!inputs.includes((target as any).constructor)) {
+				if (
+					hide &&
+					!inputs.includes((target as any).constructor) &&
+					target.tagName !== 'FIELDSET'
+				) {
 					target.style.display = 'none';
 				}
 			});
@@ -156,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
 	}
@@ -169,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));
@@ -188,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;
 
@@ -223,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 = [];
@@ -246,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(
@@ -268,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, {
@@ -311,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
@@ -363,4 +400,6 @@ export const observe = (target: LooseObject, propertyName?: string) => {
 		// replace old property with proxy (observable)
 		target[key] = val;
 	});
+
+	return target;
 };

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;
 		}
 	}
@@ -112,10 +109,10 @@ defineCE(
 
 		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'
 			);
 		}
@@ -130,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());
 }
 
@@ -152,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');
 

package/public/test/Grandparent.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.TestGrandparent=e():t.TestGrandparent=e()}(self,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{TestGrandparent:()=>S});var r=new Function("try {return this===window;}catch(e){ return false;}");let n=new Set;r()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>n.add(t)));class o{#t;#e=!1;#r=!1;constructor(t,e={},r="l"){this.#t=t,this.data=e,this.bubble=r}get type(){return this.#t}get stopped(){return this.#e}get immediateStopped(){return this.#r}stopPropagation(){this.#e=!0}stopImmediatePropagation(){this.stopPropagation(),this.#r=!0}}var s=new Function("try {return this===window;}catch(e){ return false;}");let c=new Set;function i(t,e){let r=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const n=t?._mc;!e&&n?r=r.concat(Object.values(t._mc)):e&&n&&n[e]&&r.push(n[e])}})),r}function a(t,e,r=!0){let n=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&n.push(t._mc[e]):n=n.concat(Object.values(t._mc)),r))return n;t=t.parentNode}return n}function l(t){return t&&t instanceof HTMLElement}function u(t,e,r={}){let n=t;if(!n._mc){let e=b?.debug;b.debug=!1,n._mc=new b(t),b.debug=e,delete n._mc._mc}const o=n._mc;return e.length&&!o[e]&&(o[e]=r,t instanceof HTMLElement&&t.setAttribute("_mc","")),r}function d(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("_mc")&&t.removeAttribute("_mc")}function p(t,e,r={},n="l"){let s=t?._mc;if(!s)return;let c=e instanceof o?new o(e.type,e.data,"l"):new o(e,r,"l"),i="string"!=typeof e?e:new o(e,r,n);[...Object.values(s)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(c)})),/[ud]/.test(i.bubble)&&g(t,i)}function g(t,e){/[ud]/.test(e.bubble)&&setTimeout((()=>{if(-1===e.bubble.indexOf("l")&&(e.bubble+="l"),e.bubble.indexOf("u")>-1){let r=a(t,"",!0)?.[0].target;r&&b.trigger(r,e)}e.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&b.trigger(t,e)}))}),0)}s()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>c.add(t)));class f{#n;constructor(t,e=!1){var r;this.#n=new WeakRef(t||{}),(r=this).constructor!==b&&setTimeout((()=>{r.trigger("Init")}),0),function(t){if(!s()||t.constructor===b)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((n=>{let o=/^one/.test(n),s=n.replace(/^on[e]{0,1}/,""),i=s.toLowerCase();o&&Object.defineProperty(t,"on"+s,{configurable:!0,enumerable:!1,writable:!0,value:t=>{r.constructor.prototype[n].bind(r)(t)}}),c.has("on"+i)&&function(t,e,r,n=!1,o=!1){let s={once:!1};n&&(s.capture=n),o&&(s.once=o),t.addEventListener(e,r,s)}(e,i,(t=>{r.trigger(s,t)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class m extends f{_mc={};constructor(t){super(t)}static trigger=p;trigger(t,e={},r="l"){let n=this;if(n.constructor===m||n.constructor===b){let s=t instanceof o?new o(t.type,t.data,"l"):new o(t,e,"l"),c="string"!=typeof t?t:new o(t,e,r);return[...Object.getOwnPropertyNames(n)].forEach((t=>{n[t]?.trigger&&"function"==typeof n[t]?.trigger&&n[t]?.trigger(s)})),void(/[ud]/.test(c.bubble)&&g(n.target,c))}if(n instanceof m||n instanceof b){const n=this,s="string"!=typeof t?t:new o(t,e,r),c="on"+s.type[0].toUpperCase()+s.type.slice(1);if(s.bubble.indexOf("l")>-1&&(s.immediateStopped||"function"!=typeof n[c]||(n[c](s),n.hasOwnProperty(c)&&delete n[c])),s.stopped||"l"===s.bubble)return n;/[ud]/.test(s.bubble)&&g(n.target,s)}}}class b extends f{_mc={};constructor(t,e=!1){super(t)}static add=u;static remove=d;static trigger=p;trigger(t,e={},r){m.prototype.trigger.call(this,t,e,r)}parent(t=""){let e=this.target;return l(e)?a(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return l(e)?a(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!l(e))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';e.setAttribute("temp_id",r);const o=i([...e.querySelectorAll(n)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return l(e)?i([...e.querySelectorAll("*[_mc]")],t):[]}}new Map;class h extends HTMLElement{constructor(){super()}connectedCallback(){b.trigger(this,"Connected")}disconnectedCallback(){b.trigger(this,"Disconnected")}adoptedCallback(){b.trigger(this,"Adopted")}attributeChangedCallback(t,e,r){b.trigger(this,"AttributeChanged",{name:t,oldValue:e,newValue:r})}}function y(t,e,r=[]){if(customElements.get(t))return void console.warn(`IGNORED: Custom element "${t}" is already defined!`);if(!t.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let n=t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("");customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(n,class extends h{instance;constructor(t){super();let r=new e(this,t);b.add(this,n,r)}static get observedAttributes(){return r}}))}function w(t){return customElements.get(t)}function _(t,e){return Math.floor(Math.random()*(e-t+1)+t)}y("test-greatgrandchild",class extends b{constructor(t){super(t)}onConnected(){this.updateStyle()}updateStyle(){this.target.setAttribute("style","border-color:rgb("+_(0,255)+","+_(0,255)+","+_(0,255)+")")}});const O=w("test-greatgrandchild");y("test-grandchild",class extends b{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<2;e++)t.target.append(new O)}});const E=w("test-grandchild");y("test-child",class extends b{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<10;e++)t.target.append(new E)}});const v=w("test-child");y("test-parent",class extends b{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new v)}});const j=w("test-parent");y("test-grandparent",class extends b{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new j)}});const S=w("test-grandparent");return e})()));

package/public/test/Testform.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.TestTestform=t():e.TestTestform=t()}(self,(()=>(()=>{"use strict";var e=new Function("try {return this===window;}catch(e){ return false;}");let t=new Set;e()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>t.add(e)));class n{#e;#t=!1;#n=!1;constructor(e,t={},n="l"){this.#e=e,this.data=t,this.bubble=n}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#n}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#n=!0}}var a=new Function("try {return this===window;}catch(e){ return false;}");let r=new Set;function l(e,t){let n=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const a=e?._mc;!t&&a?n=n.concat(Object.values(e._mc)):t&&a&&a[t]&&n.push(a[t])}})),n}function o(e,t,n=!0){let a=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&a.push(e._mc[t]):a=a.concat(Object.values(e._mc)),n))return a;e=e.parentNode}return a}function i(e){return e&&e instanceof HTMLElement}function s(e,t,n,a=!1,r=!1){let l={once:!1};a&&(l.capture=a),r&&(l.once=r),e.addEventListener(t,n,l)}function c(e,t,n={}){let a=e;if(!a._mc){let t=m?.debug;m.debug=!1,a._mc=new m(e),m.debug=t,delete a._mc._mc}const r=a._mc;return t.length&&!r[t]&&(r[t]=n,e instanceof HTMLElement&&e.setAttribute("_mc","")),n}function u(e,t){if(!t)return;const n=e?._mc||{};n&&n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,a={},r="l"){let l=e?._mc;if(!l)return;let o=t instanceof n?new n(t.type,t.data,"l"):new n(t,a,"l"),i="string"!=typeof t?t:new n(t,a,r);[...Object.values(l)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(o)})),/[ud]/.test(i.bubble)&&d(e,i)}function d(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let n=o(e,"",!0)?.[0].target;n&&m.trigger(n,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&m.trigger(e,t)}))}),0)}a()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>r.add(e)));class b{#a;constructor(e,t=!1){var n;this.#a=new WeakRef(e||{}),(n=this).constructor!==m&&setTimeout((()=>{n.trigger("Init")}),0),function(e){if(!a()||e.constructor===m)return;const t=e.target;if(t instanceof HTMLElement){let n=e;Object.getOwnPropertyNames(n.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof n.constructor.prototype[e])).forEach((a=>{let l=/^one/.test(a),o=a.replace(/^on[e]{0,1}/,""),i=o.toLowerCase();l&&Object.defineProperty(e,"on"+o,{configurable:!0,enumerable:!1,writable:!0,value:e=>{n.constructor.prototype[a].bind(n)(e)}}),r.has("on"+i)&&s(t,i,(e=>{n.trigger(o,e)}),!1,l)}))}}(this)}get target(){return this.#a.deref()}}class f extends b{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},a="l"){let r=this;if(r.constructor===f||r.constructor===m){let l=e instanceof n?new n(e.type,e.data,"l"):new n(e,t,"l"),o="string"!=typeof e?e:new n(e,t,a);return[...Object.getOwnPropertyNames(r)].forEach((e=>{r[e]?.trigger&&"function"==typeof r[e]?.trigger&&r[e]?.trigger(l)})),void(/[ud]/.test(o.bubble)&&d(r.target,o))}if(r instanceof f||r instanceof m){const r=this,l="string"!=typeof e?e:new n(e,t,a),o="on"+l.type[0].toUpperCase()+l.type.slice(1);if(l.bubble.indexOf("l")>-1&&(l.immediateStopped||"function"!=typeof r[o]||(r[o](l),r.hasOwnProperty(o)&&delete r[o])),l.stopped||"l"===l.bubble)return r;/[ud]/.test(l.bubble)&&d(r.target,l)}}}class m extends b{_mc={};constructor(e,t=!1){super(e)}static add=c;static remove=u;static trigger=p;trigger(e,t={},n){f.prototype.trigger.call(this,e,t,n)}parent(e=""){let t=this.target;return i(t)?o(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return i(t)?o(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!i(t))return[];const n=Math.random().toString().replace(".",""),a='[_mc]:not([temp_id="'+n+'"] [_mc] [_mc])';t.setAttribute("temp_id",n);const r=l([...t.querySelectorAll(a)],e);return t.removeAttribute("temp_id"),r}descendants(e=""){let t=this?.target;return i(t)?l([...t.querySelectorAll("*[_mc]")],e):[]}}function g(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var a;(a=e[n])&&a.constructor&&a.constructor===Object?t[n]=g(e[n]):t[n]=e[n]})),t}function h(e,t=!0){let n={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const a=h(e[t],!1);for(const e in a)n[t+"."+e]=a[e]}else n[t]=e[t]})),t?g(n):n}function y(e,t){return JSON.stringify(h(e))===JSON.stringify(h(t))}function v(e,t){let n;return()=>{clearTimeout(n),n=setTimeout((function(){e(...arguments)}),t)}}function O(e,t){const n=Object.getOwnPropertyDescriptors(e);for(const[e,a]of Object.entries(n))("get"in a||"set"in a)&&Object.defineProperty(t,e,a)}new Map;class w extends HTMLElement{constructor(){super()}connectedCallback(){m.trigger(this,"Connected")}disconnectedCallback(){m.trigger(this,"Disconnected")}adoptedCallback(){m.trigger(this,"Adopted")}attributeChangedCallback(e,t,n){m.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:n})}}function x(e){return null!=e&&"object"==typeof e}function E(e){let t=new Set,n=/\{[^\{\}]*\}/g;return e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(n))).forEach((a=>{new Set(e.getAttribute(a)?.match(n)).forEach((e=>t.add(e.replace(/[\{\}]/g,""))))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(n))).forEach((e=>{(e.nodeValue||"").match(n).forEach((e=>{t.add(e.replace(/[\{\}]/g,""))}))})),[...t].map((e=>e.replace(/[\{\}]/g,""))),[...t]}const k=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class A extends m{data={};oldDisplay="";constructor(e){super(e);let t=this;E(e).forEach((e=>t.data[e]="")),j(t),t.#r(),delete t._mc}#r(){let e=this,t=e.target,n=!1;t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((n=>{let a=new Set(t.getAttribute(n)?.match(/\{[^\{\}]*\}/g));var r;e.data.observe((r=t.getAttribute(n),e=>{let l=r;a.forEach((t=>{l=l.replace(t,e[t.replace(/[\{\}]/g,"")])})),t.setAttribute(n,l)}))})),[...t.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((a=>{n=!0;let r=new Set(a.nodeValue.match(/\{[^\{\}]*\}/g));var l;e.data.observe((l=a.nodeValue,n=>{let o=l;r.forEach((e=>{o=o.replace(e,n[e.replace(/[\{\}]/g,"")])})),Object.keys(n).some((e=>!!n[e]))&&(e.oldDisplay?t.style=e.oldDisplay:t.removeAttribute("style"),delete e.oldDisplay),a.nodeValue=o})),e.oldDisplay=t.getAttribute("style)")||"",n&&!k.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(e){let t=this,n={};Object.keys(e.data).forEach((a=>{t.data.hasOwnProperty(a)&&(n[a]=e.data[a])})),JSON.stringify(n)!==JSON.stringify(t.data)&&Object.assign(t.data,n)}}const j=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if("_"===t[0]||void 0===e?.[t])return e;let n,a=e[t];if(!a.prototype)switch(typeof a){case"string":n=String;break;case"number":n=Number;break;case"boolean":n=Boolean;break;case"object":n=a instanceof Array?Array:Object;break;default:return}let r=class extends n{#l=!0;constructor(e){super(e),this.constructor.callbacks=[],x(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}observe(e){return this.constructor.callbacks.push(e),this}bind(e){const t=this;if(x(t.valueOf())){!function(e){var t;(t=e,(t instanceof HTMLElement?[t]:[]).concat([...t.querySelectorAll("*")]).filter((e=>!!E(e).length)).filter((e=>"STYLE"!==e.tagName))).forEach((e=>{e?._mc?._placeholders||m.add(e,"_placeholders",new A(e))}))}(e);const n=[...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),a=function(e){let t=h(e);n.forEach((e=>{e&&e._mc.trigger("data",t)}))};t.constructor.callbacks.push(a),t.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof t.valueOf(),t);return this}notify(e){let t=this,n=x(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return void 0!==e&&(t.#l=e),t.constructor.callbacks.forEach((e=>{e(n)})),t}},l=new r(a);Object.defineProperty(e,t,{enumerable:!0,get(){if(x(l.valueOf())){let e=structuredClone(Object.assign({},l));setTimeout(v((function(){y(structuredClone(Object.assign({},l)),e)||l.notify()}),0),0)}return l},set(e){if(typeof e==typeof l.valueOf())if(x(l.valueOf())&&l.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},l));l instanceof r==0&&(l=new r(structuredClone(Object.assign({},e))),O(e,l),l.seal()),Object.assign(l,e),setTimeout(v((function(){y(structuredClone(Object.assign({},l)),t)||l.notify()}),0),0)}else{let t=l.valueOf(),n=l.constructor.callbacks;l=new r(e),l.constructor.callbacks=n,e!==t&&l.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof l.valueOf(),l,"- CANNOT BECOME:",typeof e)}}),e[t]=a})),e);class S{constructor(e){}}class _ extends S{#o;#i;constructor(e,t){super(e),this.#o=e,this.#i=t}get val(){return new FormData(this.#i).get(this.#o.name)}set val(e){[...this.#i.querySelectorAll(`input[type="radio][name="${this.#o.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class T extends S{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.checked}set val(e){this.#o.checked=e}}class N extends S{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value}set val(e){this.#o.value=e}}class C extends S{#o;#s=!1;constructor(e){super(e),this.#o=e,this.#s=e.multiple}get val(){const e=[];return[...this.#o.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{t.selected&&e.push(t.value)})),this.#s?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#o.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?(t.setAttribute("selected","selected"),t.selected=!0):(t.removeAttribute("selected"),t.selected=!1)}))}}class I extends S{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value||""}set val(e){this.#o.value=e}}class L{constructor(e,t,n){let a=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],n={};return t.forEach((t=>{const a=t.getAttribute("name")||"undefined";if(a){let r,l,o=t.type;switch((e=>e.tagName.toLowerCase())(t)){case"input":switch(o){case"radio":r=new _(t,e.constructor===HTMLFormElement?e:e.querySelector("form")),l=m.add(t,a,r);break;case"checkbox":r=new T(t),l=m.add(t,a,r);break;default:r=new N(t),l=m.add(t,a,r)}Object.defineProperty(n,a,{enumerable:!0,configurable:!0,get:()=>l.val,set:e=>{l.val!==e&&(l.val=e)}});break;case"select":r=new C(t),l=m.add(t,a,r),Object.defineProperty(n,a,{enumerable:!0,configurable:!0,get:()=>l.val,set:e=>{l.val!==e&&(l.val=e)}});break;case"textarea":r=new I(t),l=m.add(t,a,r),Object.defineProperty(n,a,{enumerable:!0,configurable:!0,get:()=>l.val,set:e=>{l.val!==e&&(l.val=e)}});break;default:console.warn("handler missing:",a,"for",t.tagName.toLowerCase(),t)}}})),n})(n);e[t]=Object.assign({},a),j(e,t),O(a,e[t]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{s(n,"keyup",(n=>{e[t].notify()})),s(n,"change",(n=>{e[t].notify()})),s(n,"select",(n=>{e[t].notify()}))}))}}return function(e,t,n=[]){if(customElements.get(e))return void console.warn(`IGNORED: Custom element "${e}" is already defined!`);if(!e.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let a=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(a,class extends w{instance;constructor(e){super();let n=new t(this,e);m.add(this,a,n)}static get observedAttributes(){return n}}))}("test-testform",class extends m{data;constructor(e){super(e);const t=this;delete this._mc;let n=t.target.attachShadow({mode:"open"});n.innerHTML=`<style>${this.css}</style>${this.template}`,new L(t,"data",n),t.data.bind(n)}onConnected(){}oneInit(){}get template(){return'\n                <form>\n                    \x3c!-- sample form to start with --\x3e\n                    <fieldset>\n                        <legend>Inputs</legend>\n                        <label>text</label><input type="text" name="textInput" value="Hallo" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}\n                        <label>color</label><input type="color" name="colorInput" value="" />\n                        <label>date</label><input type="date" name="dateInput" value="" />\n                        <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />\n                        <label>email</label><input type="email" name="email" value="" />\n                        <label>file</label><input type="file" name="fileInput" value="" />\n                        <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />\n                        <label>month</label><input type="month" name="month" value="" />\n                        <label>number</label><input type="number" name="number" value="" />\n                        <label>password</label><input type="password" name="passInput" value="" />\n                        <label>range</label><input type="range" name="rangeInput" value="" />\n                        <label>search</label><input type="search" name="searchInput" value="" />\n                        <label>tel</label><input type="tel" name="telInput" value="" />\n                        <label>time</label><input type="time" name="timeInput" value="" />\n                        <label>url</label><input type="url" name="urlInput" value="" />\n                        <label>week</label><input type="week" name="weekInput" value="" />\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Selects</legend>\n\n                            <label>singleSelect</label>\n                            <select name="singleSelect">\n                                <option disabled selected value> -- select -- </option>\n                                <option value="1">Option 1</option>\n                                <option value="2">Option 2</option>\n                                <option value="3">Option 3</option>\n                                <option value="4">Option 4</option>\n                            </select>\n\n                            <label>multiSelect</label>\n                            <select name="multiSelect" multiple="multiple" type="select-multiple">\n                                <option value="1">Option 1</option>\n                                <option value="2" selected=true>Option 2</option>\n                                <option value="3">Option 3</option>\n                                <option value="4" selected=true>Option 4</option>\n                            </select>\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong><span>{myRadio}</span></legend>\n\n                        <label>radio1</label><input type="radio" name="myRadio" value="radio1">\n                        <label>radio2</label><input type="radio" name="myRadio" value="radio2">\n                        <label>radio3</label><input type="radio" name="myRadio" value="radio3">\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Checkboxes</legend>\n                        <label>cb1</label><input type="checkbox" name="cb1">\n                        <label>cb2</label><input type="checkbox" name="cb2">\n                        <label>cb3</label><input type="checkbox" name="cb3">\n                        <label>cb4</label><input type="checkbox" name="cb4">\n                        <label>cb5</label><input type="checkbox" name="cb5">\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>TextArea</legend>\n                        <label>textArea</label>\n                        <textarea name="textArea">abc</textarea>\n                    </fieldset>\n\n                </form>\n            '}get css(){return"\nlegend {\n    display: inherit;\n    margin:  inherit;\n    vertical-align:  inherit;\n}\n\nlabel {\n    display: inline;\n    margin-top: 5px;\n    margin-left: 5px;\n    vertical-align: top;\n    width: 10em;\n    text-align: right;\n}\n\nlabel::before {\n    content: ' ';\n    display: block;\n}\n\nform input,\nform select,\nform textarea {\n    margin-left: 5px;\n    margin-top: 0px;\n    display: inline;\n}\n\nform label + textarea {\n    display: inline-block;\n    margin-top: 3px;\n}\n\nform input + label {\n    width: inherit;\n    margin-top: 3px;\n    text-align: left;\n}\n\nbody > form {\n    display: block;\n}\n\nform fieldset {\n    border: 1px solid darkslategrey;\n    border-radius: 3px;\n    margin: 0.5em 0;\n}\n            "}}),{}})()));

package/public/test.html

@@ -11,13 +11,17 @@
 			href="MicroComponents.svg"
 		/>
 		<link href="./my-tag.css" rel="stylesheet" />
+		<link href="./Grandparent.css" rel="stylesheet" />
 		<script src="./microcomponents.min.js"></script>
 		<script>
-			Object.assign(window, microcomponents); // make global
+			Object.assign(window, microcomponents); // make system global, for debugging
+			autoload(true); // automatically load web components that are undefined
 		</script>
 		<script type="module" src="./test.js"></script>
 	</head>
 	<body>
+		<test-grandparent></test-grandparent>
+		<test-testform></test-testform>
 		Open the debugger, read console, then:<br />
 	</body>
 </html>

package/public/test.js

@@ -17,17 +17,16 @@ class Translator extends DC {
             }
         });
         that.Translation.bind(translationTargetObject);
-        this.target.setAttribute('language', 'en');
-        this.Language.notify();
+        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;
         }
     }
@@ -57,22 +56,21 @@ defineCE('my-tag', class MyTag extends DC {
         that.Dom.bind(that.target);
     }
     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();
-let start = new Date().getTime();
-for (let x = 0; x < 1000; x++) {
+let start = new Date().getTime(), max = 100;
+for (let x = 0; x < max; x++) {
     fragment.append(new MyTag());
 }
 let end = new Date().getTime();
 document.body.appendChild(fragment);
 setTimeout(() => {
-    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());
+    console.log('%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);
     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');
     DC.trigger(element, 'doSomething');

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

@@ -411,3 +411,68 @@ class DC extends McBase {
 }
 
 export { addListener, removeListener, McBase, MC, DC, McEvent };
+
+let observer: MutationObserver | null = null;
+const unresolved = new Map();
+
+function loadit() {
+	document
+		.querySelectorAll(':not(:defined),[_mc]:not([_mc=""])')
+		.forEach((el) => {
+			const load: string[] = el.tagName.includes('-')
+				? [el.tagName.toLowerCase()]
+				: el.getAttribute('_mc')!.trim().split(' ');
+
+			load.forEach((elementName) => {
+				let fileName: any = elementName.toLowerCase().split('-'), // intentional any
+					lastElement = fileName[fileName.length - 1],
+					renameLastElement =
+						lastElement[0].toUpperCase() + lastElement.slice(1);
+				fileName[fileName.length - 1] = renameLastElement;
+				fileName = fileName.join('/') + '.js';
+
+				// autoload web components
+				// TBD: _mc components
+				if (
+					el.tagName.includes('-') &&
+					!unresolved.has(el.tagName.toLowerCase())
+				) {
+					const se: HTMLScriptElement = document.createElement('script');
+
+					unresolved.set(elementName, fileName);
+
+					se.setAttribute('src', fileName);
+					se.setAttribute('blocking', 'render');
+					se.setAttribute('type', 'module');
+					se.onload = () => {
+						// console.info('loaded', s);
+						unresolved.delete(elementName);
+						//console.log(unresolved);
+					};
+
+					document.head.append(se);
+				}
+			});
+			//console.log(unresolved);
+		});
+}
+
+let autoloadEnabled: boolean = false;
+
+export function autoload(enable: boolean = true): boolean {
+	if (!enable) {
+		observer?.disconnect();
+		observer = null;
+		return autoloadEnabled;
+	}
+
+	autoloadEnabled = enable;
+	observer = new MutationObserver(loadit);
+
+	setTimeout(() => {
+		observer!.observe(document.body, { childList: true, subtree: true });
+		loadit();
+	}, 5);
+
+	return autoloadEnabled;
+}

package/src/elements.ts

@@ -1,7 +1,7 @@
-"use strict";
+'use strict';
 
-import { DC } from "./MC.js";
-import { kebabToPascal } from "./helpers.js";
+import { DC } from './MC.js';
+import { kebabToPascal } from './helpers.js';
 
 class CeBaseClass extends HTMLElement {
 	constructor() {
@@ -9,19 +9,19 @@ class CeBaseClass extends HTMLElement {
 	}
 
 	connectedCallback() {
-		(DC as any).trigger(this, "Connected");
+		(DC as any).trigger(this, 'Connected');
 	}
 
 	disconnectedCallback() {
-		(DC as any).trigger(this, "Disconnected");
+		(DC as any).trigger(this, 'Disconnected');
 	}
 
 	adoptedCallback() {
-		(DC as any).trigger(this, "Adopted");
+		(DC as any).trigger(this, 'Adopted');
 	}
 
 	attributeChangedCallback(name: string, oldValue: any, newValue: any) {
-		(DC as any).trigger(this, "AttributeChanged", { name, oldValue, newValue });
+		(DC as any).trigger(this, 'AttributeChanged', { name, oldValue, newValue });
 	}
 }
 
@@ -29,7 +29,7 @@ function createNamedClass(
 	name: string,
 	ClassBody: { new (...args: any[]): any }
 ) {
-	return Object.defineProperty(ClassBody, "name", { value: name });
+	return Object.defineProperty(ClassBody, 'name', { value: name });
 }
 
 export function defineCE(
@@ -42,7 +42,7 @@ export function defineCE(
 		return;
 	}
 
-	if (!tagName.includes("-")) {
+	if (!tagName.includes('-')) {
 		throw new Error(
 			'createCustomElement: tagName must contain at least one hyphen ("-").'
 		);
@@ -60,7 +60,7 @@ export function defineCE(
 				constructor(data?: any) {
 					super();
 					let instance = new DefinitionClass(this, data);
-					(DC as any).add(this, name, instance);
+					DC.add(this, name, instance);
 				}
 
 				static get observedAttributes() {