@twobirds/microcomponents 0.1.20 → 0.1.23

package/dist/MC.ts

@@ -1,457 +0,0 @@
-'use strict';
-
-import { LooseObject } from './helpers.js';
-
-const isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
-
-export interface HTMLMcElement extends HTMLElement {
-	_mc: LooseObject;
-}
-
-function isDOM(element: { [key: string]: any }) {
-	return element && element instanceof HTMLElement;
-}
-
-// add a microcomponent to a target DOM node
-function add(target: HTMLElement, key: string, element: any = {}): HTMLMcElement {
-	let node = target as HTMLMcElement;
-
-	// create the _mc property if necessary
-	if (!node._mc) {
-		node._mc = new (DC as any)(target);
-	}
-
-	const _mc = node._mc;
-
-	// add the element with the given property key to the _mc property
-	if (key.length && !_mc[key]) {
-		_mc[key] = element;
-		// add attribute if HTMLElement
-		if (target instanceof HTMLElement && !target.getAttribute('data-mc')) {
-			target.setAttribute('data-mc', '');
-		}
-	}
-
-	//console.warn('add() args: target, key, element', arguments, node);
-
-	return node;
-}
-
-// remove a micro component from the DOM
-function remove(target: HTMLElement, key: string) {
-	if (!key) return; // silent fail
-
-	const _mc = (target as unknown as HTMLMcElement)?._mc || {};
-
-	// delete the property from the HTMLElement _mc collection
-	if (_mc && _mc[key]) {
-		delete _mc[key];
-	}
-
-	// remove the _mc attribute if the DOM collection is empty
-	if (!Object.keys(_mc).length && target instanceof HTMLElement && target.hasAttribute('data-mc')) {
-		target.removeAttribute('data-mc');
-	}
-	return;
-}
-
-// run the "init" lifecycle event on the complete _mc structure
-function init(element: DC) {
-	//console.warn('init(): args', ...arguments);
-	setTimeout(() => {
-		if (element.constructor === DC) return;
-		element.trigger('Init');
-	}, 0);
-}
-
-// 'eventName' => '_mcEventName'
-function getMcEventName(eventName: string): string {
-	return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
-}
-
-/*
-CustomEvent Section...
-*/
-function off(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject) {
-	domNode.removeEventListener(getMcEventName(eventName), handler);
-}
-
-function on(
-	domNode: Node,
-	eventName: string,
-	handler: EventListenerOrEventListenerObject,
-	once: boolean = false
-): EventListenerOrEventListenerObject {
-	domNode.addEventListener(getMcEventName(eventName), handler, { capture: false, once });
-	return handler;
-}
-
-function one(
-	domNode: Node,
-	eventName: string,
-	handler: EventListenerOrEventListenerObject
-): EventListenerOrEventListenerObject {
-	on(domNode, eventName, handler, true);
-	return handler;
-}
-
-class BubbleController {
-	stopped = false;
-	constructor() {}
-	stop() {
-		this.stopped = true;
-	}
-}
-
-// create and dispatch custom event
-function trigger(
-	domNode: HTMLElement,
-	event: string,
-	data: any = {},
-	bubble: string = 'l', // direction of bubbling
-	controller?: BubbleController
-) {
-	//console.warn('trigger args', ...arguments);
-
-	const eventName = /^_mc/.test(event) ? event : getMcEventName(event),
-		bubbleController = controller ? controller : new BubbleController(),
-		ev = new CustomEvent(eventName, {
-			detail: { data, control: bubbleController },
-			bubbles: false,
-		});
-
-	if (bubbleController.stopped) return;
-
-	if (/l/.test(bubble)) {
-		domNode.dispatchEvent(ev);
-		ev.stopImmediatePropagation();
-
-		if (bubbleController.stopped) return;
-	}
-
-	// bubble if up or down is indicated
-	if (/[ud]/.test(bubble)) {
-		// add missing 'l', or else no handlers are executed
-		if (bubble.indexOf('l') === -1) {
-			bubble += 'l';
-		}
-
-		setTimeout(() => {
-			// bubble up towards document.body
-			if (bubble.indexOf('u') > -1) {
-				let parentMc: HTMLMcElement | null | undefined =
-					domNode.parentElement?.closest('[data-mc]');
-				if (parentMc) {
-					parentMc?._mc.trigger(eventName, data, bubble, bubbleController);
-				}
-			}
-
-			// bubble down towards DOM children
-			if (bubble.indexOf('d') > -1) {
-				let childNodes: DC[] | null = (domNode as HTMLMcElement)._mc.children();
-				if (childNodes) {
-					childNodes.forEach((_mc: DC) => _mc.trigger(eventName, data, bubble)); // event multiplex - dont carry bubble controller
-				}
-			}
-		}, 0);
-	}
-}
-
-function autoAttachListeners(element: MC | DC) {
-	if (!isBrowser() || element.constructor === DC) return;
-
-	const target = element.target;
-
-	if (target instanceof HTMLElement) {
-		let that: LooseObject = element;
-		Object.getOwnPropertyNames(that.constructor.prototype)
-			.filter(
-				(key) =>
-					/^(on[A-Z]|one[A-Z])/.test(key) && typeof that.constructor.prototype[key] === 'function'
-			)
-			.forEach((key) => {
-				let once = /^one/.test(key),
-					withoutOnOne = key.replace(/^on[e]{0,1}/, ''), // preserves upper/lowercase for non-native events
-					nativeEventName = withoutOnOne.toLowerCase(); // lowercase for native event names
-
-				if ('on' + nativeEventName in target) {
-					// it is a native HTML event
-					let listener = (ev: Event) => {
-						that[key](ev);
-					};
-					// console.log( 'AAL: attach native event listener', nativeEventName, 'to', target );
-					target.addEventListener(nativeEventName, listener);
-				} else {
-					// it is a customEvent
-					// console.log( 'AAL: attach custom event listener', '_mc' + withoutOnOne , 'to key', key, 'in', element );
-					let listener = (ev: CustomEvent) => {
-						that[key](ev);
-					};
-					on(target, withoutOnOne, listener as EventListenerOrEventListenerObject, once);
-				}
-			});
-	}
-}
-
-function getMcChildNodes(domNode: HTMLElement): DC[] | null {
-	const id = Math.random().toString().replace('.', '');
-	const selector = '[data-mc]:not([temp_id="' + id + '"] [data-mc] [data-mc])';
-	domNode.setAttribute('temp_id', id);
-	const mcArray: unknown[] = ([...domNode.querySelectorAll(selector)] as HTMLMcElement[])
-		.filter((e) => !!e._mc)
-		.map((e) => e._mc);
-	domNode.removeAttribute('temp_id');
-	return mcArray.length ? (mcArray as DC[]) : null;
-}
-
-class McBase {
-	private _target: WeakRef<any>; // avoid circular reference
-
-	constructor(target?: { [key: string]: any }) {
-		let element = this as unknown as MC | DC;
-
-		this._target = new WeakRef(target || {});
-
-		//console.warn('McBase: this, element, args', target, this, element, arguments);
-
-		autoAttachListeners(element);
-
-		init(element as DC); // async lifecycle event
-	}
-
-	get target(): any {
-		return this._target.deref();
-	}
-}
-
-class MC extends McBase {
-	constructor(target?: any) {
-		super(target);
-	}
-}
-
-class DC extends McBase {
-	constructor(target: HTMLElement) {
-		super(target);
-		//console.warn('DC constructor:', arguments);
-	}
-
-	static add(target: HTMLElement, key: string, element: any = {}): HTMLMcElement {
-		//console.warn('static DC.add() args', arguments);
-		return add(target, key, element);
-	}
-
-	static remove(target: HTMLElement, key: string) {
-		remove(target, key);
-	}
-
-	/* event handling */
-	off(eventName: string, handler: EventListenerOrEventListenerObject) {
-		off(this.target, eventName, handler);
-	}
-
-	on(
-		eventName: string,
-		handler: EventListenerOrEventListenerObject
-	): EventListenerOrEventListenerObject {
-		return on(this.target, eventName, handler);
-	}
-
-	one(
-		eventName: string,
-		handler: EventListenerOrEventListenerObject
-	): EventListenerOrEventListenerObject {
-		return one(this.target, eventName, handler);
-	}
-
-	trigger(eventName: string, data: any = {}, bubble: string = 'l', controller?: BubbleController) {
-		//console.warn('MC.trigger args', ...arguments, this);
-
-		trigger(this.target, eventName, data, bubble, controller);
-	}
-
-	/* DOM traversal */
-	ancestors(): DC[] | null {
-		let currentNode: HTMLElement | null = (this as DC)?.target as HTMLMcElement,
-			result: DC[] = [];
-
-		if (!isDOM(currentNode)) return [];
-
-		while ((currentNode = currentNode.closest('[data-mc]'))) {
-			if ((currentNode as HTMLMcElement)?._mc) {
-				result.push((currentNode as HTMLMcElement)?._mc as DC);
-			}
-		}
-
-		return result.length ? result : null;
-	}
-
-	closest(): DC | null {
-		let target: HTMLElement = (this as DC).target;
-		if (!isDOM(target)) return null;
-		return ((target.closest('[data-mc]') as HTMLMcElement)?._mc as DC) || null;
-	}
-
-	children(): DC[] | null {
-		let target: any = (this as any)?.target;
-		if (!isDOM(target)) return null;
-		return getMcChildNodes(target);
-	}
-
-	descendants(): DC[] | null {
-		const target: any = (this as DC)?.target;
-		if (!isDOM(target)) return [];
-		const mcArray: unknown[] = ([...target.querySelectorAll('[data-mc]')] as HTMLMcElement[])
-			.filter((e) => !!e._mc)
-			.map((e) => e._mc);
-		return mcArray.length ? (mcArray as DC[]) : null;
-	}
-}
-
-/*
-Autoload Section...
-*/
-
-const loadingDCs = new Set<string>();
-
-function attachDC(element: string): Function {
-	//@ts-ignore
-	return () => {
-		const elements: HTMLElement[] = Array.from(
-			document.querySelectorAll(`[data-mc*="${element}"]`)
-		).filter((element) => element instanceof HTMLElement) as HTMLElement[];
-
-		if (elements.length === 0) return;
-
-		//console.log( 'loadedPromise elements', elements );
-
-		const Klass = customElements.get(element);
-
-		elements.forEach((node: HTMLElement) => {
-			try {
-				//console.log( 'add', klass!.name, 'to', node );
-				DC.add(node, Klass!.name, new Klass!(node));
-			} catch (error) {
-				if ((Klass as LooseObject)['create']) {
-					let element: HTMLMcElement = (Klass as LooseObject).create(node);
-					element.setAttribute('data-mc', node.getAttribute('data-mc')!);
-					node.replaceWith(element);
-					node = element;
-				} else {
-					throw `Class ${(Klass as LooseObject).name} doesn't have a callable constructor AND class doesn't have a static .create() method.`;
-				}
-			}
-
-			//@ts-ignore
-			const new_mc = node
-				.getAttribute('data-mc')
-				.split(' ')
-				.filter((name) => name !== element && name !== '')
-				.join(' ')
-				.trim();
-
-			//@ts-ignore
-			node.setAttribute(
-				'data-mc',
-				//@ts-ignore
-				new_mc
-			);
-		});
-	};
-}
-
-function makeLoadScript(element: string) {
-	if (loadingDCs.has(element)) return; // already loading
-
-	loadingDCs.add(element);
-
-	//console.log( 'makeLoadScript:', element);
-	const fileName: string = './' + element.split('-').join('/') + '.js';
-
-	const se: HTMLScriptElement = document.createElement('script');
-
-	se.setAttribute('src', fileName);
-	se.setAttribute('blocking', 'render');
-	se.async = true;
-	se.setAttribute('type', 'module');
-	se.setAttribute('data-name', element);
-	se.setAttribute('loading', '');
-
-	const loadedPromise = customElements.whenDefined(element);
-
-	//@ts-ignore
-	loadedPromise.then(attachDC(element));
-
-	se.addEventListener('load', (ev: Event) => {
-		loadingDCs.delete(element);
-
-		document.head.querySelector(`script[data-name="${element}"]`)?.remove();
-	});
-
-	se.addEventListener('error', (ev: Event) => {
-		console.error('could not load DC code from', fileName);
-	});
-
-	document.head.append(se);
-}
-
-function loadUndefinedMCs() {
-	// load unresolved custom elements
-	[...document.querySelectorAll(':not(:defined)')]
-		.filter(
-			(element) =>
-				!!element &&
-				!customElements.get(element.tagName.toLowerCase()) && // not in CustomElementsRegistry
-				!loadingDCs.has(element.tagName.toLowerCase()) // not in loading list
-		)
-		.forEach((el) => {
-			//console.log( 'detected CE', el.tagName.toLowerCase() );
-			makeLoadScript(el.tagName.toLowerCase()); // will automatically be instanciated
-		});
-
-	// if defined in _mc attribute: instanciate DCs, load if necessary
-	[...document.querySelectorAll('[data-mc]:not([data-mc=""]')]
-		.filter((element) => !!element)
-		.forEach((el) => {
-			const _mc = el
-				.getAttribute('data-mc')
-				?.split(' ')
-				.filter((name) => name !== '');
-			_mc?.forEach((element) => {
-				//console.log( 'detected DC', dc );
-				const isDefined = customElements.get(element);
-				if (!loadingDCs.has(element) && !isDefined) {
-					makeLoadScript(element);
-				} else if (isDefined) {
-					attachDC(element)();
-				}
-			});
-		});
-}
-
-let autoloadEnabled: boolean = false;
-let observer: MutationObserver | null = null;
-
-function autoload(enable: boolean = true): boolean {
-	if (!enable) {
-		observer?.disconnect();
-		observer = null;
-		return autoloadEnabled;
-	}
-
-	autoloadEnabled = enable;
-	observer = new MutationObserver(loadUndefinedMCs);
-
-	setTimeout(() => {
-		observer!.observe(document.body, { childList: true, subtree: true });
-		loadUndefinedMCs();
-	}, 5);
-
-	(window as LooseObject).autoload = (window as LooseObject).autoload || autoload;
-
-	return autoloadEnabled;
-}
-
-(autoload as LooseObject).state = loadingDCs;
-
-export { McBase, MC, DC, autoload, on, one, off, trigger };

package/dist/MicroComponents.svg

@@ -1,15 +0,0 @@
-<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
- <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
- <title>test</title>
- <rect fill="transparent" x="0" y="0" width="200" height="200" fill-opacity="1"/>
- <g style="fill:transparent">
-  <title>first bird</title>
-  <path fill="#18829c" d="
-    m15,160
-    a30,75 45 1 0 160,-150
-    a20,50 225 1 1 -110,100
-    a12,25 45 1 1 60,-50
-    a20,50 225 1 0 -110,100
-    " />
- </g>
-</svg>

package/dist/elements.d.ts

@@ -1,5 +0,0 @@
-export declare function defineCE(tagName: string, DefinitionClass: {
-    new (...args: any[]): any;
-} | Function, observedAttributes?: string[]): void;
-export declare function getCE(tagName: string): CustomElementConstructor | undefined;
-//# sourceMappingURL=elements.d.ts.map

package/dist/elements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["elements.ts"],"names":[],"mappings":"AASA,wBAAgB,QAAQ,CACvB,OAAO,EAAE,MAAM,EACf,eAAe,EAAE;IAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,GAAG,QAAQ,EACzD,kBAAkB,GAAE,MAAM,EAAO,QA6EjC;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,wBAAwB,GAAG,SAAS,CAE3E"}

package/dist/elements.js

@@ -1,50 +0,0 @@
-'use strict';
-import { DC, McBase } from './MC.js';
-import { kebabToPascal } from './helpers.js';
-function createNamedClass(name, ClassBody) {
-    return Object.defineProperty(ClassBody, 'name', { value: name });
-}
-export function defineCE(tagName, DefinitionClass, observedAttributes = []) {
-    if (customElements.get(tagName)) {
-        console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
-        return;
-    }
-    if (!tagName.includes('-')) {
-        throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');
-    }
-    let name = kebabToPascal(tagName);
-    if (!(DefinitionClass.prototype instanceof McBase)) {
-        customElements.define(tagName, DefinitionClass);
-        return;
-    }
-    customElements.define(tagName, createNamedClass(name, class extends HTMLElement {
-        constructor(data) {
-            super();
-            DC.add(this, name, new DefinitionClass(this, data));
-        }
-        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(name, oldValue, newValue) {
-            this.dispatchEvent(new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } }));
-        }
-        formResetCallback() {
-            this.dispatchEvent(new CustomEvent('_mcFormReset'));
-        }
-        static get observedAttributes() {
-            return observedAttributes;
-        }
-    }));
-}
-export function getCE(tagName) {
-    return customElements.get(tagName);
-}

package/dist/elements.ts

@@ -1,94 +0,0 @@
-'use strict';
-
-import { DC, McBase } from './MC.js';
-import { kebabToPascal } from './helpers.js';
-
-function createNamedClass(name: string, ClassBody: { new (...args: any[]): any }) {
-	return Object.defineProperty(ClassBody, 'name', { value: name });
-}
-
-export function defineCE(
-	tagName: string,
-	DefinitionClass: { new (...args: any[]): any } | Function,
-	observedAttributes: string[] = []
-) {
-	//console.warn('defineCE args', arguments);
-
-	if (customElements.get(tagName)) {
-		console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
-		return;
-	}
-
-	if (!tagName.includes('-')) {
-		throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');
-	}
-
-	let name = kebabToPascal(tagName);
-
-	// a class, but not a MC
-	if (!(DefinitionClass.prototype instanceof McBase)) {
-		//console.warn('pure class', tagName, DefinitionClass);
-		customElements.define(
-			tagName,
-			// @ts-ignore
-			DefinitionClass
-		);
-		return;
-	}
-
-	//console.warn('MC class', tagName, DefinitionClass);
-	// a MC
-	customElements.define(
-		tagName,
-		createNamedClass(
-			name,
-			class extends HTMLElement {
-				constructor(data?: any) {
-					super();
-					// console.log('[named class constructor]', tagName, name, this, data);
-					// @ts-ignore
-					DC.add(this, name, new DefinitionClass(this, data));
-				}
-
-				connectedCallback() {
-					//console.warn('onConnected', this);
-					this.dispatchEvent(new CustomEvent('_mcConnected'));
-				}
-
-				connectedMoveCallback() {
-					//console.warn('onConnectedMove', this);
-					this.dispatchEvent(new CustomEvent('_mcConnectedMove'));
-				}
-
-				disconnectedCallback() {
-					//console.warn('onDisconnected', this);
-					this.dispatchEvent(new CustomEvent('_mcDisconnected'));
-				}
-
-				adoptedCallback() {
-					//console.warn('onAdopted', this);
-					this.dispatchEvent(new CustomEvent('_mcAdopted'));
-				}
-
-				attributeChangedCallback(name: string, oldValue: any, newValue: any) {
-					//console.warn('onAttributeChanged', this);
-					this.dispatchEvent(
-						new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } })
-					);
-				}
-
-				formResetCallback() {
-					this.dispatchEvent(new CustomEvent('_mcFormReset'));
-				}
-
-				static get observedAttributes() {
-					return observedAttributes;
-				}
-			}
-		)
-	);
-}
-
-export function getCE(tagName: string): CustomElementConstructor | undefined {
-	return customElements.get(tagName);
-}

package/dist/formValues.d.ts

@@ -1,3 +0,0 @@
-import { LooseObject } from './helpers.js';
-export declare function formValues(targetObject: LooseObject, propertyName: string, dom: HTMLElement | ShadowRoot): void;
-//# sourceMappingURL=formValues.d.ts.map

package/dist/formValues.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["formValues.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAsB,MAAM,cAAc,CAAC;AA6L/D,wBAAgB,UAAU,CACzB,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,WAAW,GAAG,UAAU,QAkB7B"}