@twobirds/microcomponents 0.0.1 → 0.0.2

package/.gitlab-ci.yml

@@ -0,0 +1,16 @@
+# The Docker image that will be used to build your app
+image: node:lts
+# Functions that should be executed before the build script is run
+before_script:
+  - npm i
+pages:
+  script:
+    - npm run build
+  artifacts:
+    paths:
+      # The folder that contains the files to be exposed at the Page URL
+      - public
+  rules:
+    # This ensures that only pushes to the default branch will trigger
+    # a pages deploy
+    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

package/README.md

@@ -1,16 +1,16 @@
 ## MICRO COMPONENTS
 
-![Micro Components Logo](./MicroComponents.svg)
+![Micro Components Logo](https://gitlab.com/twoBirds/microcomponents/-/raw/main/MicroComponents.svg)
 
 This code aims at **improving Javascript modularity**. It does not describe a specific Micro Component itself but rather describes they way they are **organized**. A typical example of a **Micro Component** can be found in "additional concepts" below.
 
-Using micro components enforces **DRY, KISS and SOLID** principles in Javascript programming. Read this [RFC](./MicroComponentProposal_draft.md?ref_type=heads) for the shortest info.
+Using micro components enforces **DRY, KISS and SOLID** principles in Javascript programming. Read this [RFC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/MicroComponentProposal_draft.md?ref_type=heads) for the shortest info.
 
-This is a low-level approach. It consists of a single class with 2 static methods and 5 selector methods, and weights less than 2 kB. Also there is an ES3 version to help e.g. [hbbtv](https://en.wikipedia.org/wiki/Hybrid_Broadcast_Broadband_TV) modular JS coding, or any other device that relies on ES3.
+This is a low-level approach. It consists of a single class with 2 static methods and 5 selector methods, and weights in at ~2 kB. Also there is an ES3 version to help e.g. [hbbtv](https://en.wikipedia.org/wiki/Hybrid_Broadcast_Broadband_TV) modular JS coding, or any other device that relies on ES3.
 
 For an overview, continue reading.
 
-For a detailed functional description goto [Micro Component Usage](https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_usage.md?ref_type=heads).
+For a detailed functional description goto [Micro Component Usage](https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_usage.md?ref_type=heads) and check the [typedoc API documentation](http://twobirds.gitlab.io/microcomponents/docs/modules.html).
 
 To see what can be done, go to [additional concepts](https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_magic.md?ref_type=heads) which delve a little deeper into how to use it, and what it already has been used for.
 
@@ -59,7 +59,7 @@ before:
 
 code: (assume "Button" is some class in a library)
 ```javascript
-import 'MC' from 'twobirds/microcomponents';
+import 'MC' from '@twobirds/microcomponents';
 import 'Button' from 'tb/ui'; // made-up example library
 
 // select first button element in DOM
@@ -93,7 +93,11 @@ This functionality has been used in very big and complicated data processing pro
 - to represent business processes and their tasks
 - and lately to compose very complex native web components from distinct modular functionality.
 
-I decided extract this from the [twoBirds framework](https://www.npmjs.com/package/twobirds-core), since it is framework agnostic and relies solely on the standard DOM and native javascript or typescript.
+I decided to extract this functionality from the [twoBirds framework](https://www.npmjs.com/package/twobirds-core), since it is framework agnostic, and relies solely on the standard DOM and native javascript or typescript, and is a useful tool in itself.
+
+## Useful Links
+
+[API documentation](http://twobirds.gitlab.io/microcomponents/docs/modules.html)
 
 ## Contact
 Feel free to contact me for any questions or inquiries:

package/assets/fiddle/MicroComponents.svg

@@ -0,0 +1,15 @@
+<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/assets/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Micro Components</title>
+</head>
+<body>
+    <a href="http://twobirds.gitlab.io/microcomponents/docs/modules.html" target="_blank">API</a>
+</body>
+</html>

package/dist/microcomponents.d.ts

@@ -3,12 +3,13 @@ export declare class MC {
     private privateMCs;
     static debug: boolean;
     constructor(target?: HTMLElement | null);
-    static add(element?: any, key?: string, target?: HTMLElement): any;
+    static add(element: any, key: string, target: HTMLElement): any;
     add(element?: any, key?: string, target?: HTMLElement): any;
     static remove(target: HTMLElement, key: string): void;
     remove(key: string): void;
     private getMicroComponents;
     private traverseNodes;
+    private isDOM;
     siblings(search?: string): any[];
     parent(search?: string): any[];
     parents(search?: string): any[];

package/dist/microcomponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"microcomponents.d.ts","sourceRoot":"","sources":["../src/microcomponents.ts"],"names":[],"mappings":"AACA,qBAAa,EAAE;IAEd,OAAO,CAAC,MAAM,CAAqB;IAEnC,OAAO,CAAC,UAAU,CAA8B;IAEhD,MAAM,CAAC,KAAK,EAAE,OAAO,CAAS;gBAElB,MAAM,GAAE,WAAW,GAAG,IAAW;IAM7C,MAAM,CAAC,GAAG,CAAE,OAAO,GAAE,GAAQ,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,GAAI,GAAG;IAuBxE,GAAG,CAAE,OAAO,GAAE,GAAQ,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,GAAI,GAAG;IAcjE,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAkBrD,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAiBzB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAwBrB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;IAKhC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;IAQ9B,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;IAQ/B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;IAUhC,WAAW,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;CAInC;AAED,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,EAAE,CAAC;CACR"}
+{"version":3,"file":"microcomponents.d.ts","sourceRoot":"","sources":["../src/microcomponents.ts"],"names":[],"mappings":"AACA,qBAAa,EAAE;IAEd,OAAO,CAAC,MAAM,CAAqB;IAEnC,OAAO,CAAC,UAAU,CAA8B;IAEhD,MAAM,CAAC,KAAK,EAAE,OAAO,CAAS;gBAElB,MAAM,GAAE,WAAW,GAAG,IAAW;IAM7C,MAAM,CAAC,GAAG,CAAE,OAAO,EAAE,GAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAI,GAAG;IAqBtE,GAAG,CAAE,OAAO,GAAE,GAAQ,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,GAAI,GAAG;IAgBjE,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAkBrD,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAiBzB,OAAO,CAAC,kBAAkB;IA0B1B,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,KAAK;IASb,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;IAchC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;IAQ9B,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;IAQ/B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;IAahC,WAAW,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;CAOnC;AAED,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,EAAE,CAAC;CACR"}

package/dist/microcomponents.js

@@ -10,17 +10,15 @@ export class MC {
     // add a microcomponent to a target DOM node
     static add(element = {}, key, target) {
         const mc = target;
-        if (key && target) {
-            // create the _mc property if necessary
-            if (!mc._mc) {
-                mc._mc = new MC();
-            }
-            // add the element with the given property key to the _mc property object
-            if (key && !mc._mc[key]) {
-                mc._mc[key] = element;
-                if (target) {
-                    target.setAttribute('_mc', '');
-                }
+        // create the _mc property if necessary
+        if (!mc._mc) {
+            mc._mc = new MC();
+        }
+        // add the element with the given property key to the _mc property object
+        if (key && !mc._mc[key]) {
+            mc._mc[key] = element;
+            if (target) {
+                target.setAttribute('_mc', '');
             }
         }
         return element;
@@ -30,9 +28,10 @@ export class MC {
         // add the element
         if (target && key) {
             // ...to the DOM
-            MC.add(element, key, target);
+            this.privateMCs[key] = element; // also the first element in the private MC collection
+            return MC.add(element, key, target);
         }
-        else if (key) {
+        if (key && !element) {
             // ... to the private element collection
             this.privateMCs[key] = element;
         }
@@ -69,11 +68,21 @@ export class MC {
         let mcValues = [];
         elements.forEach(e => {
             if (e) {
-                if (!search && e._mc) {
-                    mcValues = mcValues.concat(Object.values(e._mc));
+                if (e instanceof HTMLElement) {
+                    if (!search && e._mc) {
+                        mcValues = mcValues.concat(Object.values(e._mc));
+                    }
+                    else if (search && e._mc && e._mc[search]) {
+                        mcValues.push(e._mc[search]);
+                    }
                 }
-                else if (search && e._mc && e._mc[search]) {
-                    mcValues.push(e._mc[search]);
+                else if (e instanceof MC) {
+                    if (!search) {
+                        mcValues = mcValues.concat(Object.values(this.privateMCs));
+                    }
+                    else if (search && this.privateMCs[search]) {
+                        mcValues.push(e._mc[search]);
+                    }
                 }
             }
         });
@@ -97,27 +106,41 @@ export class MC {
         }
         return mcValues;
     }
+    isDOM(element) {
+        return element && element instanceof HTMLElement;
+    }
     /*
     selector methods, non-chainable
     */
     // all public _mc members and private collection members
     siblings(search) {
-        return this.getMicroComponents([this.target], search).concat(Object.entries(this.privateMCs));
+        if (this.target) {
+            if (this.target instanceof HTMLElement === true) {
+                return this.getMicroComponents([this.target], search);
+            }
+            else {
+                const result = this.privateMCs[search || ''];
+                return search && result ? [result] : Object.entries(this.privateMCs);
+            }
+        }
+        return [];
     }
-    // first anchestor DOM node, all puclic MCs
+    // first anchestor DOM node, all public MCs
     parent(search) {
-        if (!this.target)
+        if (!this.isDOM(this.target))
             return [];
         return this.traverseNodes(this.target.parentNode, search, true);
     }
-    // all anchestor DOM nodes, beginning with the closest, all puclic MCs
+    // all anchestor DOM nodes, beginning with the closest, all public MCs
     parents(search) {
-        if (!this.target)
+        if (!this.isDOM(this.target))
             return [];
         return this.traverseNodes(this.target.parentNode, search, false);
     }
     // nearest child DOM nodes, all puclic MCs
     children(search) {
+        if (!this.isDOM(this.target))
+            return [];
         const id = crypto.randomUUID();
         this.target.setAttribute('temp-id', id);
         const myDomElements = this.target.querySelectorAll(`*[_mc]:not([temp-id="${id}"] [_mc] [_mc])`);
@@ -127,6 +150,8 @@ export class MC {
     }
     // all descendant DOM nodes, all puclic MCs
     descendants(search) {
+        if (!this.isDOM(this.target))
+            return [];
         const myDomElements = this.target.querySelectorAll('*[_mc]');
         return this.getMicroComponents([...myDomElements], search);
     }

package/dist/microcomponents.min.js

@@ -1,27 +1,34 @@
 'use strict';export class MC{target;privateMCs={};static debug=false;constructor(target=null){this.target=target;this.privateMCs={};}
-static add(element={},key,target){const mc=target;if(key&&target){if(!mc._mc){mc._mc=new MC();}
-if(key&&!mc._mc[key]){mc._mc[key]=element;if(target){target.setAttribute('_mc','');}}}
+static add(element={},key,target){const mc=target;if(!mc._mc){mc._mc=new MC();}
+if(key&&!mc._mc[key]){mc._mc[key]=element;if(target){target.setAttribute('_mc','');}}
 return element;}
-add(element={},key,target){if(target&&key){MC.add(element,key,target);}
-else if(key){this.privateMCs[key]=element;}
+add(element={},key,target){if(target&&key){this.privateMCs[key]=element;return MC.add(element,key,target);}
+if(key&&!element){this.privateMCs[key]=element;}
 return element;}
 static remove(target,key){const mc=target;if(mc._mc&&mc._mc[key]){delete mc._mc[key];}
 if(!Object.keys(mc._mc).length&&target.hasAttribute('_mc')){target.removeAttribute('_mc');}
 return;}
 remove(key){if(key in this.privateMCs){delete this.privateMCs[key];}
 if(MC.debug&&this.target){MC.remove(this.target,key);}}
-getMicroComponents(elements,search){let mcValues=[];elements.forEach(e=>{if(e){if(!search&&e._mc){mcValues=mcValues.concat(Object.values(e._mc));}
-else if(search&&e._mc&&e._mc[search]){mcValues.push(e._mc[search]);}}});return mcValues;}
+getMicroComponents(elements,search){let mcValues=[];elements.forEach(e=>{if(e){if(e instanceof HTMLElement){if(!search&&e._mc){mcValues=mcValues.concat(Object.values(e._mc));}
+else if(search&&e._mc&&e._mc[search]){mcValues.push(e._mc[search]);}}
+else if(e instanceof MC){if(!search){mcValues=mcValues.concat(Object.values(this.privateMCs));}
+else if(search&&this.privateMCs[search]){mcValues.push(e._mc[search]);}}}});return mcValues;}
 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;}
-siblings(search){return this.getMicroComponents([this.target],search).concat(Object.entries(this.privateMCs));}
-parent(search){if(!this.target)
+isDOM(element){return element&&element instanceof HTMLElement;}
+siblings(search){if(this.target){if(this.target instanceof HTMLElement===true){return this.getMicroComponents([this.target],search);}
+else{const result=this.privateMCs[search||''];return search&&result?[result]:Object.entries(this.privateMCs);}}
+return[];}
+parent(search){if(!this.isDOM(this.target))
 return[];return this.traverseNodes(this.target.parentNode,search,true);}
-parents(search){if(!this.target)
+parents(search){if(!this.isDOM(this.target))
 return[];return this.traverseNodes(this.target.parentNode,search,false);}
-children(search){const id=crypto.randomUUID();this.target.setAttribute('temp-id',id);const myDomElements=this.target.querySelectorAll(`*[_mc]:not([temp-id="${id}"][_mc][_mc])`);const mcValues=this.getMicroComponents([...myDomElements],search);this.target.removeAttribute('temp-id');return mcValues;}
-descendants(search){const myDomElements=this.target.querySelectorAll('*[_mc]');return this.getMicroComponents([...myDomElements],search);}}
+children(search){if(!this.isDOM(this.target))
+return[];const id=crypto.randomUUID();this.target.setAttribute('temp-id',id);const myDomElements=this.target.querySelectorAll(`*[_mc]:not([temp-id="${id}"][_mc][_mc])`);const mcValues=this.getMicroComponents([...myDomElements],search);this.target.removeAttribute('temp-id');return mcValues;}
+descendants(search){if(!this.isDOM(this.target))
+return[];const myDomElements=this.target.querySelectorAll('*[_mc]');return this.getMicroComponents([...myDomElements],search);}}

package/dist/microcomponents.ts

@@ -0,0 +1,196 @@
+'use strict';
+export class MC {
+
+	private target: HTMLElement | null;
+
+	private privateMCs: { [key: string]: any } = {};
+
+	static debug: boolean = false;
+
+	constructor(target: HTMLElement | null = null) {
+		this.target = target;
+		this.privateMCs = {};
+	}
+
+	// add a microcomponent to a target DOM node
+	static add( element: any = {}, key: string, target: HTMLElement ): any {
+
+		const mc = target as any;
+
+		// create the _mc property if necessary
+		if ( !mc._mc ){
+			mc._mc = new MC();
+		}
+
+		// add the element with the given property key to the _mc property object
+		if ( key && !mc._mc[ key ] ){
+			mc._mc[ key ] = element;
+			if ( target ) {
+				target.setAttribute('_mc', '' );
+			}
+		}
+
+		return element;
+	}
+
+	// add a microcomponent to the DOM or to the private microcomponent collection
+	add( element: any = {}, key?: string, target?: HTMLElement ): any {
+
+		// add the element
+		if ( target && key ){
+			// ...to the DOM
+			this.privateMCs[key] = element; // also the first element in the private MC collection
+			return MC.add( element, key, target );
+		}
+		if ( key && !element ){
+			// ... to the private element collection
+			this.privateMCs[key] = element;
+		}
+		return element;
+	}
+
+	// remove a micro component from the DOM
+	static remove(target: HTMLElement, key: string): void {
+
+		const mc = target as any;
+
+		// delete the property from the DOM
+		if (mc._mc && mc._mc[key]) {
+			delete mc._mc[key];
+		}
+
+		// remove the _mc attribute if the DOM collection is empty
+		if ( !Object.keys(mc._mc).length && target.hasAttribute('_mc') ) {
+			target.removeAttribute('_mc');
+		}
+
+		return;
+	}
+
+	// remove a micro component from the DOM or the private microcomponent collection
+	remove(key: string): void {
+
+		// remove the component from the private collection
+		if (key in this.privateMCs) {
+			delete this.privateMCs[key];
+		}
+
+		if ( MC.debug && this.target ){
+			MC.remove(this.target, key);
+		}
+	}
+
+	/*
+	helper methods
+	*/
+
+	// get all microcomponents from a list of HTMLElements
+	private getMicroComponents(elements: any[], search?: string): any[] {
+
+		let mcValues: any[] = [];
+
+		elements.forEach(e => {
+			if ( e ){
+				if ( e instanceof HTMLElement ){
+					if (!search && (e as HTMLElementMc)._mc) {
+						mcValues = mcValues.concat(Object.values((e as any)._mc));
+					} else if (search && (e as HTMLElementMc)._mc && (e as any)._mc[search]) {
+						mcValues.push((e as any)._mc[search]);
+					}
+				} else if (e instanceof MC ){
+					if ( !search ) {
+						mcValues = mcValues.concat(Object.values( this.privateMCs ));
+					} else if (search && this.privateMCs[search]) {
+						mcValues.push((e as any)._mc[search]);
+					}
+				}
+			}
+		});
+
+		return mcValues;
+	}
+
+	// get all ancestor DOM nodes up to the document
+	private traverseNodes(node: Node | null, search?: string, firstonly: boolean = true): any[] {
+
+		let mcValues: any[] = [];
+
+		while (node) {
+			if ((node as HTMLElementMc)._mc) {
+				if (!search) {
+					mcValues = mcValues.concat(Object.values((node as any)._mc));
+				} else if (search && (node as any)._mc[search]) {
+					mcValues.push((node as any)._mc[search]);
+				}
+				if ( firstonly ) return mcValues;
+			}
+			node = node.parentNode;
+		}
+
+		return mcValues;
+	}
+
+	private isDOM( element: any ): boolean {
+		return element && element instanceof HTMLElement;
+	}
+
+	/*
+	selector methods, non-chainable
+	*/
+
+	// all public _mc members and private collection members
+	siblings(search?: string): any[] {
+		if ( this.target ){
+			if ( this.target instanceof HTMLElement === true ){
+				return this.getMicroComponents( [ this.target ], search );
+			} else {
+				const result = this.privateMCs[search || ''];
+				return search && result ? [ result ] : Object.entries( this.privateMCs );
+			}
+		}
+		return []
+	}
+
+
+	// first anchestor DOM node, all public MCs
+	parent(search?: string): any[] {
+
+		if ( !this.isDOM( this.target) ) return [];
+
+		return this.traverseNodes( ( this.target as HTMLElement).parentNode, search, true);
+	}
+
+	// all anchestor DOM nodes, beginning with the closest, all public MCs
+	parents(search?: string): any[] {
+
+		if ( !this.isDOM( this.target) ) return [];
+
+		return this.traverseNodes( (this.target as HTMLElement ).parentNode, search, false);
+	}
+
+	// nearest child DOM nodes, all puclic MCs
+	children(search?: string): any[] {
+
+		if ( !this.isDOM( this.target) ) return [];
+
+		const id = crypto.randomUUID();
+		(this.target as HTMLElement).setAttribute('temp-id', id);
+		const myDomElements = (this.target as HTMLElement).querySelectorAll(`*[_mc]:not([temp-id="${id}"] [_mc] [_mc])`);
+		const mcValues = this.getMicroComponents( [ ...myDomElements ], search);
+		(this.target as HTMLElement).removeAttribute('temp-id');
+		return mcValues;
+	}
+
+	// all descendant DOM nodes, all puclic MCs
+	descendants(search?: string): any[] {
+
+		if ( !this.isDOM( this.target) ) return [];
+
+		const myDomElements = (this.target as HTMLElement).querySelectorAll('*[_mc]');
+		return this.getMicroComponents( [ ...myDomElements ], search);
+	}
+}
+
+export interface HTMLElementMc extends HTMLElement {
+	_mc: MC;
+}

package/package.json

@@ -1,19 +1,40 @@
 {
   "name": "@twobirds/microcomponents",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Micro Components Organization Class",
   "main": "microcomponents.js",
   "sideEffects": false,
   "scripts": {
-    "build": "tsc; npm run minify; npm run copyToDist; typedoc;",
+    "typedoc": "typedoc",
+    "clean": "rm -rf build/*; rm -rf docs/*; 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 build/* dist; cp MicroComponents.svg dist"
+    "copyToDist": "cp build/* dist; cp MicroComponents.svg dist; cp MicroComponents.svg public/fiddle;"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "jsmin": "^1.0.1",
-    "typedoc": "^0.23.24",
-    "typescript": "^5.6.2"
-  }
+    "typedoc": "^0.26.10",
+    "typescript": "^5.6.3"
+  },
+  "keywords": [
+    "javascript",
+    "library",
+    "native",
+    "DOM manipulation",
+    "lightweight",
+    "standalone",
+    "SPA",
+    "PWA",
+    "ES3",
+    "ES5",
+    "ES6",
+    "ES7",
+    "ES2015",
+    "ES2016",
+    "client",
+    "API"
+  ]
 }

package/public/docs/assets/search.js

@@ -0,0 +1 @@
+window.searchData = JSON.parse("{\"kinds\":{\"2\":\"Module\",\"64\":\"Function\",\"128\":\"Class\",\"256\":\"Interface\",\"512\":\"Constructor\",\"1024\":\"Property\",\"2048\":\"Method\",\"65536\":\"Type literal\"},\"rows\":[{\"kind\":2,\"name\":\"microcomponents\",\"url\":\"modules/microcomponents.html\",\"classes\":\"tsd-kind-module\"},{\"kind\":128,\"name\":\"MC\",\"url\":\"classes/microcomponents.MC.html\",\"classes\":\"tsd-kind-class tsd-parent-kind-module\",\"parent\":\"microcomponents\"},{\"kind\":1024,\"name\":\"debug\",\"url\":\"classes/microcomponents.MC.html#debug\",\"classes\":\"tsd-kind-property tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"add\",\"url\":\"classes/microcomponents.MC.html#add-2\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"remove\",\"url\":\"classes/microcomponents.MC.html#remove-2\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":512,\"name\":\"constructor\",\"url\":\"classes/microcomponents.MC.html#constructor\",\"classes\":\"tsd-kind-constructor tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":1024,\"name\":\"target\",\"url\":\"classes/microcomponents.MC.html#target\",\"classes\":\"tsd-kind-property tsd-parent-kind-class tsd-is-private\",\"parent\":\"microcomponents.MC\"},{\"kind\":1024,\"name\":\"privateMCs\",\"url\":\"classes/microcomponents.MC.html#privateMCs\",\"classes\":\"tsd-kind-property tsd-parent-kind-class tsd-is-private\",\"parent\":\"microcomponents.MC\"},{\"kind\":65536,\"name\":\"__type\",\"url\":\"classes/microcomponents.MC.html#privateMCs.__type\",\"classes\":\"tsd-kind-type-literal tsd-parent-kind-property\",\"parent\":\"microcomponents.MC.privateMCs\"},{\"kind\":2048,\"name\":\"add\",\"url\":\"classes/microcomponents.MC.html#add\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"remove\",\"url\":\"classes/microcomponents.MC.html#remove\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"getMicroComponents\",\"url\":\"classes/microcomponents.MC.html#getMicroComponents\",\"classes\":\"tsd-kind-method tsd-parent-kind-class tsd-is-private\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"traverseNodes\",\"url\":\"classes/microcomponents.MC.html#traverseNodes\",\"classes\":\"tsd-kind-method tsd-parent-kind-class tsd-is-private\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"isDOM\",\"url\":\"classes/microcomponents.MC.html#isDOM\",\"classes\":\"tsd-kind-method tsd-parent-kind-class tsd-is-private\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"siblings\",\"url\":\"classes/microcomponents.MC.html#siblings\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"parent\",\"url\":\"classes/microcomponents.MC.html#parent\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"parents\",\"url\":\"classes/microcomponents.MC.html#parents\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"children\",\"url\":\"classes/microcomponents.MC.html#children\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":2048,\"name\":\"descendants\",\"url\":\"classes/microcomponents.MC.html#descendants\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.MC\"},{\"kind\":256,\"name\":\"HTMLElementMc\",\"url\":\"interfaces/microcomponents.HTMLElementMc.html\",\"classes\":\"tsd-kind-interface tsd-parent-kind-module\",\"parent\":\"microcomponents\"},{\"kind\":1024,\"name\":\"_mc\",\"url\":\"interfaces/microcomponents.HTMLElementMc.html#_mc\",\"classes\":\"tsd-kind-property tsd-parent-kind-interface\",\"parent\":\"microcomponents.HTMLElementMc\"},{\"kind\":2,\"name\":\"microcomponents.es3\",\"url\":\"modules/microcomponents_es3.html\",\"classes\":\"tsd-kind-module\"},{\"kind\":64,\"name\":\"__isEmpty\",\"url\":\"functions/microcomponents_es3.__isEmpty.html\",\"classes\":\"tsd-kind-function tsd-parent-kind-module\",\"parent\":\"microcomponents.es3\"},{\"kind\":128,\"name\":\"MC\",\"url\":\"classes/microcomponents_es3.MC.html\",\"classes\":\"tsd-kind-class tsd-parent-kind-module\",\"parent\":\"microcomponents.es3\"},{\"kind\":2048,\"name\":\"add\",\"url\":\"classes/microcomponents_es3.MC.html#add\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":2048,\"name\":\"remove\",\"url\":\"classes/microcomponents_es3.MC.html#remove\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":512,\"name\":\"constructor\",\"url\":\"classes/microcomponents_es3.MC.html#constructor\",\"classes\":\"tsd-kind-constructor tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":1024,\"name\":\"_target\",\"url\":\"classes/microcomponents_es3.MC.html#_target\",\"classes\":\"tsd-kind-property tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":2048,\"name\":\"siblings\",\"url\":\"classes/microcomponents_es3.MC.html#siblings\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":2048,\"name\":\"parent\",\"url\":\"classes/microcomponents_es3.MC.html#parent\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":2048,\"name\":\"parents\",\"url\":\"classes/microcomponents_es3.MC.html#parents\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":2048,\"name\":\"children\",\"url\":\"classes/microcomponents_es3.MC.html#children\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"},{\"kind\":2048,\"name\":\"descendants\",\"url\":\"classes/microcomponents_es3.MC.html#descendants\",\"classes\":\"tsd-kind-method tsd-parent-kind-class\",\"parent\":\"microcomponents.es3.MC\"}],\"index\":{\"version\":\"2.3.9\",\"fields\":[\"name\",\"comment\"],\"fieldVectors\":[[\"name/0\",[0,31.209]],[\"comment/0\",[]],[\"name/1\",[1,26.101]],[\"comment/1\",[]],[\"name/2\",[2,31.209]],[\"comment/2\",[]],[\"name/3\",[3,22.736]],[\"comment/3\",[]],[\"name/4\",[4,22.736]],[\"comment/4\",[]],[\"name/5\",[5,26.101]],[\"comment/5\",[]],[\"name/6\",[6,31.209]],[\"comment/6\",[]],[\"name/7\",[7,31.209]],[\"comment/7\",[]],[\"name/8\",[8,31.209]],[\"comment/8\",[]],[\"name/9\",[3,22.736]],[\"comment/9\",[]],[\"name/10\",[4,22.736]],[\"comment/10\",[]],[\"name/11\",[9,31.209]],[\"comment/11\",[]],[\"name/12\",[10,31.209]],[\"comment/12\",[]],[\"name/13\",[11,31.209]],[\"comment/13\",[]],[\"name/14\",[12,26.101]],[\"comment/14\",[]],[\"name/15\",[13,26.101]],[\"comment/15\",[]],[\"name/16\",[14,26.101]],[\"comment/16\",[]],[\"name/17\",[15,26.101]],[\"comment/17\",[]],[\"name/18\",[16,26.101]],[\"comment/18\",[]],[\"name/19\",[17,31.209]],[\"comment/19\",[]],[\"name/20\",[18,31.209]],[\"comment/20\",[]],[\"name/21\",[19,31.209]],[\"comment/21\",[]],[\"name/22\",[20,31.209]],[\"comment/22\",[]],[\"name/23\",[1,26.101]],[\"comment/23\",[]],[\"name/24\",[3,22.736]],[\"comment/24\",[]],[\"name/25\",[4,22.736]],[\"comment/25\",[]],[\"name/26\",[5,26.101]],[\"comment/26\",[]],[\"name/27\",[21,31.209]],[\"comment/27\",[]],[\"name/28\",[12,26.101]],[\"comment/28\",[]],[\"name/29\",[13,26.101]],[\"comment/29\",[]],[\"name/30\",[14,26.101]],[\"comment/30\",[]],[\"name/31\",[15,26.101]],[\"comment/31\",[]],[\"name/32\",[16,26.101]],[\"comment/32\",[]]],\"invertedIndex\":[[\"__isempty\",{\"_index\":20,\"name\":{\"22\":{}},\"comment\":{}}],[\"__type\",{\"_index\":8,\"name\":{\"8\":{}},\"comment\":{}}],[\"_mc\",{\"_index\":18,\"name\":{\"20\":{}},\"comment\":{}}],[\"_target\",{\"_index\":21,\"name\":{\"27\":{}},\"comment\":{}}],[\"add\",{\"_index\":3,\"name\":{\"3\":{},\"9\":{},\"24\":{}},\"comment\":{}}],[\"children\",{\"_index\":15,\"name\":{\"17\":{},\"31\":{}},\"comment\":{}}],[\"constructor\",{\"_index\":5,\"name\":{\"5\":{},\"26\":{}},\"comment\":{}}],[\"debug\",{\"_index\":2,\"name\":{\"2\":{}},\"comment\":{}}],[\"descendants\",{\"_index\":16,\"name\":{\"18\":{},\"32\":{}},\"comment\":{}}],[\"getmicrocomponents\",{\"_index\":9,\"name\":{\"11\":{}},\"comment\":{}}],[\"htmlelementmc\",{\"_index\":17,\"name\":{\"19\":{}},\"comment\":{}}],[\"isdom\",{\"_index\":11,\"name\":{\"13\":{}},\"comment\":{}}],[\"mc\",{\"_index\":1,\"name\":{\"1\":{},\"23\":{}},\"comment\":{}}],[\"microcomponents\",{\"_index\":0,\"name\":{\"0\":{}},\"comment\":{}}],[\"microcomponents.es3\",{\"_index\":19,\"name\":{\"21\":{}},\"comment\":{}}],[\"parent\",{\"_index\":13,\"name\":{\"15\":{},\"29\":{}},\"comment\":{}}],[\"parents\",{\"_index\":14,\"name\":{\"16\":{},\"30\":{}},\"comment\":{}}],[\"privatemcs\",{\"_index\":7,\"name\":{\"7\":{}},\"comment\":{}}],[\"remove\",{\"_index\":4,\"name\":{\"4\":{},\"10\":{},\"25\":{}},\"comment\":{}}],[\"siblings\",{\"_index\":12,\"name\":{\"14\":{},\"28\":{}},\"comment\":{}}],[\"target\",{\"_index\":6,\"name\":{\"6\":{}},\"comment\":{}}],[\"traversenodes\",{\"_index\":10,\"name\":{\"12\":{}},\"comment\":{}}]],\"pipeline\":[]}}");