@twobirds/microcomponents 0.1.1 → 0.1.2

package/public/test/observables.ts

@@ -1,416 +0,0 @@
-'use strict';
-
-import {
-	LooseObject,
-	debounce,
-	deepEqual,
-	flattenObject,
-	copyGettersSetters,
-} from './helpers.js';
-
-import { DC, HTMLMcElement, trigger } from './MC.js';
-
-function isObservableObject(value: any): boolean {
-	return value != null && typeof value === 'object';
-}
-
-type Callback = (value: any) => void;
-
-function getPlaceholders(target: HTMLElement): string[] {
-	let placeholders: Set<string> = new Set(),
-		regEx = /\{[^\{\}]*\}/g;
-
-	// scan attributes
-	( !!target.getAttributeNames ? target.getAttributeNames() : [] )
-		.filter((attr) => target.getAttribute(attr)?.match(regEx)) // extract placeholder(s)
-		.forEach((attr) => {
-			let placeholders: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
-			placeholders.forEach((placeholder) =>
-				placeholders.add(placeholder.replace(/[\{\}]/g, ''))
-			);
-		});
-
-	// scan children text nodes
-	[...target.childNodes]
-		.filter((childNode) => {
-			return (
-				// is text node and has placeholders
-				childNode.nodeType === 3 &&
-				((childNode as any).nodeValue || '').match(regEx)
-			);
-		})
-		.forEach((childNode) => {
-			((childNode as any).nodeValue || '')
-				.match(regEx)
-				.forEach((placeholder: string) => {
-					placeholders.add(placeholder.replace(/[\{\}]/g, ''));
-				});
-		});
-	
-	// extract {} and return result
-	return [...placeholders].map((placeholder) =>
-		placeholder.replace(/[\{\}]/g, '')
-	);
-}
-
-const inputs = [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement];
-
-class Placeholders extends DC {
-	data: LooseObject = {};
-	oldDisplay?: string = '';
-
-	constructor(target: HTMLElement) {
-		super(target);
-		getPlaceholders(target).forEach((property) => (this.data[property] = ''));
-		observe(this);
-		this.#attachCallbacks();
-	}
-
-	#attachCallbacks() {
-		let target = this.target,
-			hide: boolean = false;
-
-		//console.log('attachCallbacks', this.target);
-
-		// scan attributes
-		( !!target.getAttributeNames ? target.getAttributeNames() : [] )
-			.filter((attr: string) =>
-				target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
-			) // extract placeholder(s)
-			.forEach((attr: string) => {
-				let placeholders: Set<string> = new Set(
-					target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
-				);
-				// attach callback
-				this.data.observe(
-					((template: string) => (data: LooseObject) => {
-						let result: string = template;
-						placeholders.forEach((placeholder) => {
-							result = result.replace(
-								placeholder,
-								data[placeholder.replace(/[\{\}]/g, '')]
-							);
-						});
-						target.setAttribute(attr, result);
-						//console.log('cb setAttribute()', data, template, attr, result);
-					})(target.getAttribute(attr))
-				);
-			});
-
-		// scan children text nodes
-		[...target.childNodes]
-			.filter((childNode) => {
-				return (
-					// is text node and has placeholders
-					childNode.nodeType === 3 &&
-					((childNode as Node).nodeValue || '').match(/\{[^\{\}]*\}/g)
-				);
-			})
-			.forEach((childNode) => {
-				hide = true;
-				let placeholders: Set<string> = new Set(
-					childNode.nodeValue.match(/\{[^\{\}]*\}/g)
-				);
-
-				// attach callback
-				this.data.observe(
-					((template: string) => (data: LooseObject) => {
-						let result: string = template;
-						//console.log('text node "', template, '" callback data:', data);
-						placeholders.forEach((placeholder) => {
-							result = result.replace(
-								placeholder,
-								data[placeholder.replace(/[\{\}]/g, '')]
-							);
-						});
-
-						if (!!this.oldDisplay) {
-							target.style = this.oldDisplay;
-						} else {
-							target.removeAttribute('style');
-						}
-						delete this.oldDisplay;
-
-						childNode.nodeValue = result;
-					})(childNode.nodeValue)
-				);
-
-				// hide for now
-				this.oldDisplay = target.getAttribute('style') || ''; // TBD allow null to indicate there was no old style attribute
-
-				if (
-					hide &&
-					!inputs.includes((target as any).constructor) &&
-					target.tagName !== 'FIELDSET'
-				) {
-					target.style.display = 'none';
-				}
-			});
-	}
-
-	onData(ev: CustomEvent) {
-		let data: LooseObject = {};
-		Object.keys(ev.detail.data).forEach((key) => {
-			if (this.data.hasOwnProperty(key)) data[key] = ev.detail.data[key];
-		});
-		//console.log( 'Placeholder onData', ev, data );
-		if (JSON.stringify(data) !== JSON.stringify(this.data))
-			Object.assign(this.data, data); // will trigger callbacks
-	}
-}
-
-function getPlaceholderElements(
-	target: HTMLElement | DocumentFragment | ShadowRoot
-): HTMLElement[] {
-	let elements: Array<Node> = [target]
-		.concat([...(target.querySelectorAll('*') as unknown as HTMLElement[])])
-		.filter((e) => !!getPlaceholders(e as HTMLElement).length)
-		.filter((e) => (e as HTMLElement)?.tagName !== 'STYLE')
-		.reverse(); // to start with inner elements
-	//console.log('getPlaceholderElements', elements);
-	return elements as HTMLElement[];
-}
-
-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));
-	});
-}
-
-export type Observable = {
-	observe: (cb: Callback) => void;
-	notify: () => void;
-	bind: (target: HTMLElement | DocumentFragment | ShadowRoot ) => void;
-	callbacks: Array<Function>;
-};
-
-type Class<T> = new (...args: any[]) => T;
-
-// repository for observable class wrappers
-const classRepo: LooseObject = {};
-
-// creates a new observable class wrapper
-function makeObservable(val: any): Class<typeof val>{
-
-	const Constructor = val.constructor,
-		ConstructorName: string = Constructor.name;
-
-	let ObservableClass = class extends Constructor {
-		#notify: boolean = true;
-		#callbacks: Array<Function> = [];
-
-		constructor(val: any) {
-			super(val);
-			(this.constructor as LooseObject).callbacks = [];
-			if (isObservableObject(val)) {
-				// you cannot bind native values to the dom
-				Object.getOwnPropertyNames(val).forEach((key) => {
-					this[key] = val[key];
-				});
-			}
-		}
-
-		get callbacks(): Array<Function> {
-			return this.#callbacks
-		}
-
-		set callbacks( callbacks: Array<Function> ){
-			this.#callbacks = callbacks
-		}
-
-		observe( callback: Function ) {
-			//console.log('observe');
-			this.#callbacks.push( callback );
-			return this;
-		}
-
-		bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
-			const iso = isObservableObject(this.valueOf());
-			//console.log('bind', iso, target);
-
-			if (iso) {
-				makePlaceholders(target);
-				const placeholders: unknown = 
-					[
-						target, 
-						...target.querySelectorAll('[data-mc]'), 
-					]
-					.filter(
-						(e) => !!(e as LooseObject)?._mc?._placeholders
-					);
-
-				//console.log('placeholders:', target, placeholders);
-				
-				const func = function callback(data: LooseObject) {
-					// avoid bubbling for speed
-					let flattenedData = flattenObject(data);
-					//console.log('inside placeholder callback', target, flattenedData);
-					(placeholders as Node[]).forEach((node) => {
-						// console.log('trigger callback', e);
-						if (!node) return;
-						trigger(node as HTMLMcElement, 'data', flattenedData);
-					});
-				};
-				(this as any).#callbacks.push(func);
-				this.notify();
-			} else {
-				console.warn(
-					'IGNORED - cannot bind a non-Object to the dom, IS:',
-					typeof this.valueOf(),
-					this
-				);
-			}
-
-			return this;
-		}
-
-		notify(notify?: boolean) {
-			let data =
-					isObservableObject(this.valueOf()) &&
-					this.valueOf() instanceof Array === false
-						? structuredClone(Object.assign({}, this))
-						: this.valueOf();
-
-			if (notify !== undefined) {
-				this.#notify = notify;
-				// return;
-			}
-
-			//if (this.#notify) console.log('notify', this, data);
-			(this as any).#callbacks.forEach((f: Function) => {
-				// console.log(
-				// 	(this.constructor as any).callbacks,
-				// 	'notify: exec callback',
-				// 	f,
-				// 	data
-				// );
-				f(data);
-			});
-
-			return this;
-		}
-	};
-
-	(classRepo as any)[ConstructorName] = ObservableClass;
-
-	// console.log( 'classRepo:', classRepo );
-
-	return ObservableClass;
-}
-
-function getConstructor( val: any ): Class<typeof val> { 
-	let key: string = val.constructor.name;
-	return classRepo[key] || makeObservable( val );
-}
-
-export const observe = (
-	target: LooseObject,
-	propertyName?: string
-): LooseObject => {
-	let keys = !propertyName
-		? [...Object.getOwnPropertyNames(target)]
-		: [propertyName];
-
-	keys.forEach((key) => {
-		if ( 
-			target.hasOwnProperty(key) 
-			&&  typeof target[key] !== 'function' 
-			&& !target?.[key]?.constructor?.prototype?.observe 
-		) {
-
-			// console.log( 'co propname', key, typeof target[key], target[key] );
-			if (key[0] === '_' || target?.[key] === undefined) return target;
-			let val: any = target[key];
-
-			let o = new ( getConstructor(val) as Class<typeof val> )( val );
-
-			Object.defineProperty(target, key, {
-				enumerable: true,
-				get() {
-					if (isObservableObject(o.valueOf())) {
-						let check = structuredClone(Object.assign({}, o));
-						setTimeout(
-							debounce(function checkChanges() {
-								let state = structuredClone(Object.assign({}, o));
-								//console.log( 'check changes', state, check );
-								if (!deepEqual(state, check)) {
-									//console.log( '-> not equal!' );
-									o.notify();
-								}
-							}, 0),
-							0
-						);
-					}
-					return o;
-				},
-				set(val: any) {
-					//console.log( 'SET:', isObservableObject( val.valueOf() ), 'set:', val, 'to', isObservableObject( o.valueOf() ), o, );
-					if (typeof val === typeof o.valueOf()) {
-						let iso =
-							isObservableObject(o.valueOf()) &&
-							o.valueOf() instanceof Array === false;
-						//console.log('target iso:', iso);
-						if (iso) {
-							let old = structuredClone(Object.assign({}, o));
-							//val = structuredClone(Object.assign({}, val));
-
-							//let callbacks = (o.constructor as LooseObject).callbacks;
-							if (o?.constructor?.prototype?.observe === undefined ) {
-								o = new ( getConstructor(val) as Class<typeof val> )( 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 = callbacks;
-
-							setTimeout(
-								// check for changes
-								debounce(function checkChanges() {
-									let state = structuredClone(Object.assign({}, o));
-									//console.log( 'check changes', state, check );
-									if (!deepEqual(state, old)) {
-										//console.log( '-> not equal!' );
-										o.notify();
-									}
-								}, 0),
-								0
-							);
-						} else {
-							// simple native var
-							let old = o.valueOf(),
-								callbacks = (o as Observable).callbacks;
-
-							// console.log( 'sO', o, o.valueOf(), 'val', val );
-							if (val !== old) {
-								// console.log( '-> sO new val', val );
-								o = new ( getConstructor(val) as Class<typeof val> )( val );
-								(o as Observable).callbacks = callbacks;
-								o.notify();
-							}
-						}
-					} else {
-						console.warn(
-							'IGNORED - cannot change observable types, IS:',
-							typeof o.valueOf(),
-							o,
-							'- CANNOT BECOME:',
-							typeof val
-						);
-					}
-				},
-			});
-
-			// replace old property with proxy (observable)
-			target[key] = val;
-		};
-
-	});
-
-	return target;
-};

package/public/test/style.css

@@ -1,8 +0,0 @@
-body {
-    font-family: Arial, Helvetica, sans-serif;
-}
-
-label {
-    font-weight: bold;
-    color: gray;
-}

package/public/test/test/child.d.ts

@@ -1,2 +0,0 @@
-export declare const Child: CustomElementConstructor | undefined;
-//# sourceMappingURL=child.d.ts.map

package/public/test/test/child.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"child.d.ts","sourceRoot":"","sources":["../../../src/test/test/child.ts"],"names":[],"mappings":"AAmCA,eAAO,MAAM,KAAK,sCAAsB,CAAC"}

package/public/test/test/child.js

@@ -1,26 +0,0 @@
-import { DC, defineCE, getCE } from './../../microcomponents.js';
-import { Grandchild } from './grandchild.js';
-defineCE('test-child', class TestChild extends DC {
-    constructor(target) {
-        super(target);
-    }
-    onConnected() {
-        let that = this;
-        for (let x = 0; x < 10; x++) {
-            that.target.append(new Grandchild());
-        }
-    }
-    onClick(ev) {
-        this.trigger('Up', null, 'lu');
-        ev.stopImmediatePropagation();
-    }
-    onUp(ev) {
-        console.log('child "Up" handler');
-        ev.detail.control.stop();
-    }
-    onDown(ev) {
-        console.log('child "Down" handler');
-    }
-});
-export const Child = getCE('test-child');
-//# sourceMappingURL=child.js.map

package/public/test/test/child.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"child.js","sourceRoot":"","sources":["../../../src/test/test/child.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,QAAQ,CACP,YAAY,EAEZ,MAAM,SAAU,SAAQ,EAAE;IACzB,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,UAAW,EAAE,CAAC,CAAC;QACvC,CAAC;IACF,CAAC;IAED,OAAO,CAAC,EAAS;QAChB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC/B,EAAE,CAAC,wBAAwB,EAAE,CAAC;IAC/B,CAAC;IAED,IAAI,CAAE,EAAe;QACpB,OAAO,CAAC,GAAG,CAAE,oBAAoB,CAAE,CAAC;QACpC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM,CAAE,EAAe;QACtB,OAAO,CAAC,GAAG,CAAE,sBAAsB,CAAE,CAAC;IACvC,CAAC;CAED,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC"}

package/public/test/test/child.ts

@@ -1,36 +0,0 @@
-import { DC, defineCE, getCE } from './../../microcomponents.js';
-import { Grandchild } 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 Grandchild!());
-			}
-		}
-
-		onClick(ev: Event){
-			this.trigger('Up', null, 'lu');
-			ev.stopImmediatePropagation();
-		}
-
-		onUp( ev: CustomEvent ){
-			console.log( 'child "Up" handler' );
-			ev.detail.control.stop();
-		}
-
-		onDown( ev: CustomEvent ){
-			console.log( 'child "Down" handler' );
-		}
-
-	}
-);
-
-export const Child = getCE('test-child');

package/public/test/test/grandchild.d.ts

@@ -1,2 +0,0 @@
-export declare const Grandchild: CustomElementConstructor | undefined;
-//# sourceMappingURL=grandchild.d.ts.map

package/public/test/test/grandchild.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"grandchild.d.ts","sourceRoot":"","sources":["../../../src/test/test/grandchild.ts"],"names":[],"mappings":"AA8BA,eAAO,MAAM,UAAU,sCAA2B,CAAC"}

package/public/test/test/grandchild.js

@@ -1,22 +0,0 @@
-import { DC, defineCE, getCE } from '../../microcomponents.js';
-import { Greatgrandchild } from './greatgrandchild.js';
-defineCE('test-grandchild', class TestGrandchild extends DC {
-    constructor(target) {
-        super(target);
-    }
-    onConnected() {
-        let that = this;
-        for (let x = 0; x < 2; x++) {
-            that.target.append(new Greatgrandchild());
-        }
-    }
-    onClick(ev) {
-        this.trigger('Up', null, 'lu');
-        ev.stopImmediatePropagation();
-    }
-    onUp(ev) {
-        console.log('grandchild "Up" handler');
-    }
-});
-export const Grandchild = getCE('test-grandchild');
-//# sourceMappingURL=grandchild.js.map

package/public/test/test/grandchild.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grandchild.js","sourceRoot":"","sources":["../../../src/test/test/grandchild.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,QAAQ,CACP,iBAAiB,EAEjB,MAAM,cAAe,SAAQ,EAAE;IAC9B,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,eAAgB,EAAE,CAAC,CAAC;QAC5C,CAAC;IACF,CAAC;IAED,OAAO,CAAC,EAAS;QAChB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC/B,EAAE,CAAC,wBAAwB,EAAE,CAAC;IAC/B,CAAC;IAED,IAAI,CAAE,EAAe;QACpB,OAAO,CAAC,GAAG,CAAE,yBAAyB,CAAE,CAAC;IAC1C,CAAC;CAED,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC"}

package/public/test/test/grandchild.ts

@@ -1,31 +0,0 @@
-import { DC, defineCE, getCE } from '../../microcomponents.js';
-import { Greatgrandchild } 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 Greatgrandchild!());
-			}
-		}
-
-		onClick(ev: Event){
-			this.trigger('Up', null, 'lu');
-			ev.stopImmediatePropagation();
-		}
-
-		onUp( ev: CustomEvent ){
-			console.log( 'grandchild "Up" handler' );
-		}
-
-	}
-);
-
-export const Grandchild = getCE('test-grandchild');

package/public/test/test/grandparent.d.ts

@@ -1,2 +0,0 @@
-export declare const GrandParent: CustomElementConstructor | undefined;
-//# sourceMappingURL=grandparent.d.ts.map

package/public/test/test/grandparent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"grandparent.d.ts","sourceRoot":"","sources":["../../../src/test/test/grandparent.ts"],"names":[],"mappings":"AA0CA,eAAO,MAAM,WAAW,sCAA4B,CAAC"}

package/public/test/test/grandparent.js

@@ -1 +0,0 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.grandparent=e():t.grandparent=e()}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},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,{GrandParent:()=>w});const n=new Function("try {return this===window;}catch(e){ return false;}");function o(t){return t&&t instanceof HTMLElement}function r(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function s(t,e,n,o=!1){return t.addEventListener(r(e),n,{capture:!1,once:o}),n}class c{stopped=!1;constructor(){}stop(){this.stopped=!0}}class a{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==l&&e.trigger("Init")}),0),function(t){if(!n()||t.constructor===l)return;const e=t.target;if(e instanceof HTMLElement){let n=t;Object.getOwnPropertyNames(n.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof n.constructor.prototype[t])).forEach((t=>{let o=/^one/.test(t),r=t.replace(/^on[e]{0,1}/,""),c=r.toLowerCase();if("on"+c in e){let o=e=>{n[t](e)};e.addEventListener(c,o)}else s(e,r,(e=>{n[t](e)}),o)}))}}(this)}get target(){return this._target.deref()}}class l extends a{constructor(t){super(t)}static add(t,e,n={}){return function(t,e,n={}){let o=t;o._mc||(o._mc=new l(t));const r=o._mc;return e.length&&!r[e]&&(r[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),o}(t,e,n)}static remove(t,e){!function(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}(t,e)}off(t,e){!function(t,e,n){t.removeEventListener(r(e),n)}(this.target,t,e)}on(t,e){return s(this.target,t,e)}one(t,e){return function(t,e,n){return s(t,e,n,!0),n}(this.target,t,e)}trigger(t,e={},n="l",o){!function(t,e,n={},o="l",s){const a=/^_mc/.test(e)?e:r(e),l=s||new c,i=new CustomEvent(a,{detail:{data:n,control:l},bubbles:!1});l.stopped||(t.dispatchEvent(i),i.stopImmediatePropagation(),l.stopped||/[ud]/.test(o)&&(-1===o.indexOf("l")&&(o+="l"),setTimeout((()=>{if(o.indexOf("u")>-1){let e=t.parentElement?.closest("[data-mc]");e&&e?._mc.trigger(a,n,o,l)}if(o.indexOf("d")>-1){let e=t._mc.children();e&&e.forEach((t=>t.trigger(a,n,o)))}}),0)))}(this.target,t,e,n,o)}ancestors(){let t=this?.target,e=[];if(!o(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return o(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return o(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const o=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),o.length?o:null}(t):null}descendants(){const t=this?.target;if(!o(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}new Set;class i extends HTMLElement{constructor(){super()}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function d(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}function u(t,e,n=[]){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 o=t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("");d(e.prototype.constructor)&&e.prototype instanceof a?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(o,class extends i{instance;constructor(t){super();const n=d(e)?new e(this,t):e;l.add(this,o,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function p(t){return customElements.get(t)}function m(t,e){return Math.floor(Math.random()*(e-t+1)+t)}u("test-greatgrandchild",class extends l{constructor(t){super(t)}onConnected(){this.updateStyle()}onClick(t){this.trigger("Up",null,"lu"),t.stopImmediatePropagation()}onUp(t){console.log('greatgrandchild "Up" handler')}updateStyle(){this.target.setAttribute("style","border-color:rgb("+m(0,255)+","+m(0,255)+","+m(0,255)+")")}});const g=p("test-greatgrandchild");u("test-grandchild",class extends l{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<2;e++)t.target.append(new g)}onClick(t){this.trigger("Up",null,"lu"),t.stopImmediatePropagation()}onUp(t){console.log('grandchild "Up" handler')}});const h=p("test-grandchild");u("test-child",class extends l{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<10;e++)t.target.append(new h)}onClick(t){this.trigger("Up",null,"lu"),t.stopImmediatePropagation()}onUp(t){console.log('child "Up" handler'),t.detail.control.stop()}onDown(t){console.log('child "Down" handler')}});const f=p("test-child");u("test-parent",class extends l{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new f)}onClick(t){this.trigger("Up",null,"lu"),t.stopImmediatePropagation()}onUp(t){console.log('parent "Up" handler')}onDown(t){console.log('parent "Down" handler')}});const b=p("test-parent");u("test-grandparent",class extends l{constructor(t){super(t)}onConnected(t){for(let t=0;t<5;t++)this.target.append(new b)}onDisconnected(t){}onAdopted(t){}onAttributeChanged(t){}onClick(t){this.trigger("Up",null,"lu"),t.stopImmediatePropagation()}onUp(t){console.log('grandparent "Up" handler'),this.trigger("Down",{},"ld")}onDown(t){console.log('grandparent "Down" handler')}});const w=p("test-grandparent");return e})()));

package/public/test/test/grandparent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grandparent.js","sourceRoot":"","sources":["../../../src/test/test/grandparent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,QAAQ,CACP,kBAAkB,EAElB,MAAM,eAAgB,SAAQ,EAAE;IAC/B,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW,CAAC,EAAc;QACzB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,MAAO,EAAE,CAAC,CAAC;QACnC,CAAC;IACF,CAAC;IAED,cAAc,CAAC,EAAc;IAC7B,CAAC;IAED,SAAS,CAAC,EAAc;IACxB,CAAC;IAED,kBAAkB,CAAC,EAAc;IACjC,CAAC;IAED,OAAO,CAAC,EAAS;QAChB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC/B,EAAE,CAAC,wBAAwB,EAAE,CAAC;IAC/B,CAAC;IAED,IAAI,CAAE,EAAe;QACpB,OAAO,CAAC,GAAG,CAAE,0BAA0B,CAAE,CAAC;QAC1C,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC;IAChC,CAAC;IAED,MAAM,CAAE,EAAe;QACtB,OAAO,CAAC,GAAG,CAAE,4BAA4B,CAAE,CAAC;IAC7C,CAAC;CAED,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,kBAAkB,CAAC,CAAC"}

package/public/test/test/grandparent.ts

@@ -1,43 +0,0 @@
-import { DC, defineCE, getCE } from '../../microcomponents.js';
-import { Parent } from './parent.js';
-defineCE(
-	'test-grandparent',
-
-	class TestGrandparent extends DC {
-		constructor(target: HTMLElement) {
-			super(target);
-		}
-
-		onConnected(ev:CustomEvent) {
-			for (let x = 0; x < 5; x++) {
-				this.target.append(new Parent!());
-			}
-		}
-
-		onDisconnected(ev:CustomEvent) {
-		}
-
-		onAdopted(ev:CustomEvent) {
-		}
-
-		onAttributeChanged(ev:CustomEvent) {
-		}
-
-		onClick(ev: Event){
-			this.trigger('Up', null, 'lu');
-			ev.stopImmediatePropagation();
-		}
-
-		onUp( ev: CustomEvent ){
-			console.log( 'grandparent "Up" handler' );
-			this.trigger('Down', {}, 'ld');
-		}
-
-		onDown( ev: CustomEvent ){
-			console.log( 'grandparent "Down" handler' );
-		}
-
-	}
-);
-
-export const GrandParent = getCE('test-grandparent');

package/public/test/test/greatgrandchild.d.ts

@@ -1,2 +0,0 @@
-export declare const Greatgrandchild: CustomElementConstructor | undefined;
-//# sourceMappingURL=greatgrandchild.d.ts.map

package/public/test/test/greatgrandchild.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"greatgrandchild.d.ts","sourceRoot":"","sources":["../../../src/test/test/greatgrandchild.ts"],"names":[],"mappings":"AAkDA,eAAO,MAAM,eAAe,sCAAgC,CAAC"}

package/public/test/test/greatgrandchild.js

@@ -1,36 +0,0 @@
-import { DC, defineCE, getCE } from '../../microcomponents.js';
-function random(min, max) {
-    var random = Math.floor(Math.random() * (max - min + 1) + min);
-    return random;
-}
-defineCE('test-greatgrandchild', class TestGreatgrandchild extends DC {
-    constructor(target) {
-        super(target);
-    }
-    onConnected() {
-        let that = this;
-        that.updateStyle();
-    }
-    onClick(ev) {
-        this.trigger('Up', null, 'lu');
-        ev.stopImmediatePropagation();
-    }
-    onUp(ev) {
-        console.log('greatgrandchild "Up" handler');
-    }
-    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 Greatgrandchild = getCE('test-greatgrandchild');
-//# sourceMappingURL=greatgrandchild.js.map