@twobirds/microcomponents 0.0.21 → 0.0.23

package/dist/microcomponents.ts

@@ -1,216 +1,8 @@
-'use strict';
-
-/*
-helper methods
-*/
-
-// get all microcomponents from a list of HTMLElements
-function getMicroComponents( elements: any[], search: string): any[] {
-	let mcValues: any[] = [];
-
-	elements.forEach( e => {
-		if (e) {
-			if (e instanceof HTMLElement) {
-				const _mc = ( e as any )?._mc;
-				if ( !search && _mc ) {
-					mcValues = mcValues.concat(Object.values(( e as any )._mc));
-				}
-				else if ( search && _mc && _mc[search] ) {
-					mcValues.push( _mc[search] );
-				}
-			}
-		}
-	});
-	return mcValues;
-}
-
-// get all ancestor DOM nodes up to the document
-function traverseNodes(node: { [key:string]: any }, search: string, firstonly = true): any[] {
-	let mcValues: any[] = [];
-	while (node) {
-		if (node._mc) {
-			if (!search) {
-				mcValues = mcValues.concat(Object.values(node._mc));
-			}
-			else if (search && node._mc[search]) {
-				mcValues.push(node._mc[search]);
-			}
-			if (firstonly)
-				return mcValues;
-		}
-		node = node.parentNode;
-	}
-	return mcValues;
-}
-
-function isDOM(element: { [key:string]: any } ) {
-	return element && element instanceof HTMLElement;
-}
-
-type HTMLElementMC = HTMLElement & { _mc: { [key:string]: any } }
-
-export class MC {
-
-	#target: { [key:string]: any } = {};
-
-	#_mc: { [key:string]: any } = {};
-
-	static debug: boolean = false;
-
-	constructor( target: { [key:string]: any } ) {
-		this.#target = target;
-		this.#_mc = {};
-	}
-
-	get _mc(): undefined | any {
-		if ( !MC.debug ) return undefined;
-		return this.#_mc;
-	}
-
-	get target(): any {
-		return this.#target;
-	}
-
-	// return all top-level micro components from an HTMLElement, or the searched one
-	static siblings( target: HTMLElementMC, search: string = '' ): any[] {
-		const mc = target as any;
-
-		if (!mc._mc) {
-			return [];
-		}
-
-		const _mc = mc._mc;
-
-		if ( search.length ){
-			return _mc?.[search] || [];
-		}
-
-		return [ ...Object.values(_mc) ];
-	}
-
-	// add a microcomponent to a target DOM node
-	static add( target: HTMLElement, key: string, element = {} ): any {
-
-		let node = target as HTMLElementMC;
-
-		// create the _mc property if necessary
-		if (!node._mc) {
-			node._mc = new MC( 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.setAttribute('_mc', '');
-			}
-		}
-		return element;
-	}
-
-	// remove a micro component from the DOM
-	static remove( target: HTMLElementMC, key: string) {
-		if ( !key ) return; // silent fail
-
-		const _mc = target?._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('_mc') ) {
-			target.removeAttribute('_mc');
-		}
-		return;
-	}
-
-	// add a microcomponent to the collection
-	add( key: string, element: any, target?: HTMLElement ): any {
-		if ( this.#_mc[key] ) return;
-
-		// if target parameter exists ( a DOM node )
-		// you want a top level (public) MC
-		if ( target ){
-			// ... add the new micro component to the DOM node _mc
-			MC.add( target, key, element );
-		}
-		// add the new micro component to the private collection anyway
-		this.#_mc[key] = element;
-
-		return element;
-	}
-
-	// remove a micro component from the collection
-	remove( key: string, target?: HTMLElement ): void {
-		const _mc = this.#_mc;
-		const t = target as HTMLElementMC;
-
-		// if target parameter exists ( a DOM node )
-		// you want to remove a top level (public) MC
-		if ( target ){
-			// ... remove the new micro component from the DOM node _mc
-			MC.remove( t, key );
-		}
-		// remove the new micro component from the private collection anyway
-		delete _mc?.[key];
-	}
-
-	// return all micro components from the collection, or the searched one
-	// in a top level DOM MC, this refers to the inner collection always
-	// use MC.siblings() to get the public MCs
-	siblings( search: string = '' ): any[] {
-		const _mc = this.#_mc;
-
-		if ( !_mc ) return [];
-
-		const result = _mc[search || ''];
-
-		return search && result ? [result] : [ ...Object.values(_mc) ];
-	}
-
-	/*
-	the following selectors will only work for the DOM top level MCs and return [] otherwise
-	*/
-
-	// first anchestor DOM node, all public MCs
-	parent( search: string = '' ): any[] {
-		if ( !isDOM(this.#target) ) return [];
-
-		return traverseNodes( (this as any).#target.parentNode, search, true);
-	}
-
-	// all anchestor DOM nodes, beginning with the closest, all public MCs
-	parents( search: string = '' ): any[] {
-		if ( !isDOM(this.#target) ) return [];
-
-		return traverseNodes( (this as any).#target.parentNode, search, false);
-	}
-
-	// nearest child DOM nodes, all puclic MCs
-	children( search: string = '' ): any[] {
-		if ( !isDOM(this.#target) ) return [];
-
-		const id = Math.random().toString().replace('.','');
-		const selector = '[_mc]:not([temp_id="' + id +'"] [_mc] [_mc])'; // HOTFIX: minifier or tsc compiler error, dont use backtick string, cuts out blanks
-		this.#target.setAttribute('temp_id', id);
-		const myDomElements = this.#target.querySelectorAll(selector);
-		const mcValues = getMicroComponents([...myDomElements], search);
-		this.#target.removeAttribute('temp_id');
-
-		return mcValues;
-	}
-
-	// all descendant DOM nodes, all puclic MCs
-	descendants( search: string = '' ): any[] {
-		if ( !isDOM(this.#target) ) return [];
-
-		const myDomElements = this.#target.querySelectorAll('*[_mc]');
-
-		return getMicroComponents([...myDomElements], search);
-	}
-}
+"use strict";
+export * from './helpers.js';
+export * from './MC.js';
+export * from './McEvent.js';
+export * from './customElements.js';
+export * from './customObservables.js';
+export * from './customSelectors.js';
+export * from './formValues.js';

package/dist/test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test.d.ts.map

package/dist/test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.d.ts","sourceRoot":"","sources":["../src/test.js"],"names":[],"mappings":""}

package/package.json

@@ -1,23 +1,27 @@
 {
   "name": "@twobirds/microcomponents",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "Micro Components Organization Class",
-  "main": "microcomponents.js",
+  "main": "./dist/microcomponents.ts",
+  "types": "./dist/microcomponents.d.ts",
   "sideEffects": false,
   "scripts": {
     "typedoc": "typedoc",
+    "webpack": "webpack",
     "clean": "rm -rf build/*; rm -rf dist/*;",
     "prep": "cp -R assets/* public || true; cp src/* build || true;",
-    "build": "npm run clean; npm run prep; tsc; npm run minify; npm run copyToDist;",
-    "minify": "jsmin -o build/microcomponents.es3.min.js ./src/microcomponents.es3.js;jsmin -o build/microcomponents.min.js build/microcomponents.js;",
-    "copyToDist": "cp -R assets/* public || true; cp build/micro* dist; cp build/microcomponents.js public; cp build/test.js public; cp MicroComponents.svg dist; cp MicroComponents.svg public/fiddle;"
+    "build": "npm run clean; npm run prep; tsc; npm run copyToDist; npm run webpack; cp dist/*.js public; cp build/test.js public; cp build/*.js public;",
+    "copyToDist": "cp -R assets/* public || true; cp build/*.ts* dist; cp MicroComponents.svg dist; cp MicroComponents.svg public/fiddle; cp dist/MicroComponents.svg public;"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "jsmin": "^1.0.1",
-    "typedoc": "^0.26.10",
-    "typescript": "^5.6.3"
+    "ts-loader": "^9.5.2",
+    "typedoc": "^0.26.11",
+    "typescript": "^5.5.4",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
   },
   "keywords": [
     "javascript",

package/public/MC.js

@@ -0,0 +1,273 @@
+"use strict";
+import { McEvent } from './McEvent.js';
+var isBrowser = new Function("try {return this===window;}catch(e){ return false;}");
+let nativeEventNames = new Set();
+// HTMLElement native event names
+if (isBrowser()) {
+    Object.keys(HTMLElement.prototype).filter(key => /^on/.test(key)).forEach(eventName => nativeEventNames.add(eventName));
+}
+// get all microcomponents from a list of HTMLElements
+function getMicroComponents(elements, search) {
+    let mcValues = [];
+    elements.forEach(e => {
+        if (e) {
+            if (e instanceof HTMLElement) {
+                const _mc = e?._mc;
+                if (!search && _mc) {
+                    mcValues = mcValues.concat(Object.values(e._mc));
+                }
+                else if (search && _mc && _mc[search]) {
+                    mcValues.push(_mc[search]);
+                }
+            }
+        }
+    });
+    return mcValues;
+}
+// get all ancestor DOM nodes up to the document root
+function traverseNodes(node, search, firstonly = true) {
+    let mcValues = [];
+    while (node) {
+        if (node._mc) {
+            if (!search) {
+                mcValues = mcValues.concat(Object.values(node._mc));
+            }
+            else if (search && node._mc[search]) {
+                mcValues.push(node._mc[search]);
+            }
+            if (firstonly)
+                return mcValues;
+        }
+        node = node.parentNode;
+    }
+    return mcValues;
+}
+function isDOM(element) {
+    return element && element instanceof HTMLElement;
+}
+function addListener(domNode, eventName, handler, capture = false, once = false) {
+    let options = { once: false };
+    if (capture) {
+        options.capture = capture;
+    }
+    if (once) {
+        options.once = once;
+    }
+    //console.log( 'addEventListener', eventName, ( handler as Function ).name, options );
+    domNode.addEventListener(eventName, handler, options);
+}
+function removeListener(domNode, eventName, handler) {
+    domNode.removeEventListener(eventName, handler);
+}
+// add a microcomponent to a target DOM node
+function add(target, key, element = {}) {
+    let node = target;
+    // create the _mc property if necessary
+    if (!node._mc) {
+        let _MC = MC, debug = MC?.debug;
+        MC.debug = false;
+        node._mc = new MC(target);
+        MC.debug = debug;
+    }
+    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.setAttribute('_mc', '');
+        }
+    }
+    return element;
+}
+// remove a micro component from the DOM
+function remove(target, key) {
+    if (!key)
+        return; // silent fail
+    const _mc = target?._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('_mc')) {
+        target.removeAttribute('_mc');
+    }
+    return;
+}
+// trigger an event
+function trigger(target, ev, data = {}) {
+    let _mc = target?._mc;
+    if (!_mc)
+        return;
+    [...Object.values(_mc)].forEach((mc) => {
+        if (mc?.trigger && typeof mc?.trigger === 'function') {
+            mc?.trigger(ev, data);
+        }
+    });
+    return;
+}
+class McBase {
+    #target; // avoid circular reference
+    #_mc = {};
+    constructor(target) {
+        let that = this;
+        this.#target = new WeakRef(target);
+        if (this.constructor !== MC && this.constructor !== DC) {
+            Object.defineProperty(this, "_mc", {
+                get() {
+                    return this.#_mc;
+                }
+            });
+        }
+    }
+    get target() {
+        return this.#target.deref();
+    }
+}
+class MC extends McBase {
+    constructor(target) {
+        super(target);
+        let that = this;
+        if (that.constructor === MC || that.constructor === DC)
+            return;
+        setTimeout(() => {
+            that.trigger('init');
+        }, 0);
+    }
+    trigger(ev, data = {}, bubble) {
+        let that = this;
+        bubble = bubble || 'l';
+        // run all triggers
+        if (that.constructor === MC || that.constructor === DC) {
+            [...Object.getOwnPropertyNames(that)].forEach((mc) => {
+                if (that[mc]?.trigger && typeof that[mc]?.trigger === 'function') {
+                    that[mc]?.trigger(ev, data, bubble);
+                }
+            });
+            return; // must return here!
+        }
+        // only this instance
+        if (that instanceof MC || that instanceof DC) {
+            const that = this, mcEvent = typeof ev !== 'string' ? ev : new McEvent(ev, data, bubble), handlerName = 'on' + mcEvent.type[0].toUpperCase() + mcEvent.type.slice(1);
+            ;
+            // console.log('trigger', handlerName, mcEvent, data, bubble );
+            if (mcEvent.bubble.indexOf('l') > -1) {
+                if (!mcEvent.immediateStopped
+                    && typeof that[handlerName] === 'function') {
+                    // console.log( 'execute handler:', handlerName );
+                    that[handlerName](mcEvent);
+                    if (that.hasOwnProperty(handlerName)) { // it is a once handler
+                        delete that[handlerName]; // remove after first execution
+                    }
+                }
+            }
+            // if event stopped or local only, handling is cancelled
+            if (mcEvent.stopped || mcEvent.bubble === 'l') {
+                return that;
+            }
+            // at this point, either 'u' or 'd' bubbling should be indicated
+            // mcEvent bubbling is asynchronous, and the order of target MC execution in case of multiple matches is not guaranteed!
+            if (isBrowser() && /[ud]/.test(mcEvent.bubble) && that instanceof MC) {
+                setTimeout(() => {
+                    // bubbling must include 'l' for local, or else no handlers are executed'
+                    if (mcEvent.bubble.indexOf('l') === -1) {
+                        mcEvent.bubble += 'l';
+                    }
+                    // bubble up towards root
+                    if (mcEvent.bubble.indexOf('u') > -1) {
+                        that
+                            .parent()
+                            .forEach((mc) => {
+                            mc instanceof MC ? mc.trigger(mcEvent) : null;
+                        });
+                    }
+                    // bubble down
+                    if (mcEvent.bubble.indexOf('d') > -1) {
+                        that
+                            .children()
+                            .forEach((mc) => {
+                            mc instanceof MC ? mc.trigger(mcEvent) : null;
+                        });
+                    }
+                }, 0);
+            }
+        }
+    }
+}
+;
+class DC extends MC {
+    constructor(target) {
+        super(target);
+    }
+    static debug = false;
+    static add = add;
+    static remove = remove;
+    static trigger = trigger;
+    parent(search = '') {
+        let target = this.target;
+        if (!isDOM(target))
+            return [];
+        return traverseNodes(target.parentNode, search, true);
+    }
+    ancestors(search = '') {
+        let target = this?.target;
+        if (!isDOM(target))
+            return [];
+        return traverseNodes(this.target.parentNode, search, false);
+    }
+    children(search = '') {
+        let target = this?.target;
+        if (!isDOM(target))
+            return [];
+        const id = Math.random().toString().replace('.', '');
+        const selector = '[_mc]:not([temp_id="' + id + '"] [_mc] [_mc])';
+        target.setAttribute('temp_id', id);
+        const myDomElements = target.querySelectorAll(selector);
+        const mcValues = getMicroComponents([...myDomElements], search);
+        target.removeAttribute('temp_id');
+        return mcValues;
+    }
+    descendants(search = '') {
+        let target = this?.target;
+        if (!isDOM(target))
+            return [];
+        const myDomElements = target.querySelectorAll('*[_mc]');
+        return getMicroComponents([...myDomElements], search);
+    }
+    autoAttachListeners() {
+        if (!isBrowser())
+            return;
+        const target = this.target;
+        if (target instanceof HTMLElement) {
+            let that = this;
+            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(), listener = (ev) => { that.trigger(withoutOnOne, ev); };
+                ;
+                // console.log('autoAttach', nativeEventName, withoutOnOne, once, listener);
+                if (once) {
+                    // console.log( '...is only called once', that.constructor.prototype[key] );
+                    Object.defineProperty(this, 'on' + withoutOnOne, {
+                        configurable: true,
+                        enumerable: false,
+                        writable: true,
+                        value: (ev) => {
+                            // console.log( 'onceHandler execute:', that.constructor.prototype[key] );
+                            (that.constructor.prototype[key]).bind(that)(ev);
+                        }
+                    });
+                }
+                if (nativeEventNames.has('on' + nativeEventName)) { // native event defined in HTMLElement
+                    // console.log('added as native listener', target, nativeEventName );
+                    addListener(target, nativeEventName, listener, false, once);
+                }
+            });
+        }
+    }
+}
+;
+export { addListener, removeListener, McBase, MC, DC, McEvent };