@twobirds/microcomponents 0.0.1

package/MicroComponentProposal_draft.md

@@ -0,0 +1,34 @@
+### RFC Proposal to WHATWG
+
+**Title:** Proposal for a **Micro Component Interface** in the DOM
+
+**Abstract:**
+
+This proposal introduces a standardized interface for managing micro components within HTML elements, enhancing modularity and reusability in web development.
+
+**Introduction:**
+
+Microcomponents provide a way to encapsulate functionality and state within a target DOM element. This proposal outlines methods for adding, removing, and querying micro components.
+
+**Proposed API:**
+
+- **Static Methods:**
+  - `MC.add(target, key, element)`: Attach a micro component.
+  - `MC.remove(target, key)`: Detach a micro component.
+
+- **Instance Methods:**
+  - `siblings(search)`: Retrieve sibling micro components.
+  - `parent(search)`: Get parent micro components.
+  - `parents(search)`: Get all ancestor micro components.
+  - `children(search)`: Retrieve child micro components.
+  - `descendants(search)`: Get all descendant micro components.
+
+**Use Cases:**
+1. Modular web applications.
+2. Enhancing component-based architecture.
+
+**Conclusion:**
+Implementing this interface will streamline microcomponent management, fostering cleaner code and improved performance.
+
+**References:**
+- [Microcomponents Repository](https://gitlab.com/twoBirds/microcomponents) for a polyfill implementation and usage examples.

package/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/README.md

@@ -0,0 +1,103 @@
+## MICRO COMPONENTS
+
+![Micro Components Logo](./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.
+
+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.
+
+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).
+
+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.
+
+
+## Why would I give this a try in my company?
+
+It is lightweight, proven and can yield positive results immediatly.
+
+
+### **As the CTO**:
+- **Reusability**: this works with every Javascript framework that allows for DOM access, and it will work as long as the DOM exists in browsers. That is, forever.
+- **Scalability**: scales perfectly by design.
+- **Interoperability**: where many teams in different projects should share specific business or UI logic, you want to have something that works in any JS framework you use.
+
+### **As a Project Manager**:
+- **Separation of Concerns**: since this is a modular approach you can **split UI logic from Business logic** and let diffent teams work on each.
+- using this, you can **work with external developers without the need to give them access to your projects code repository**.
+- you will find out that this allows your project to **become independent from the "tools hell"**. You tend to use **DIY** modules where you had tools before.
+
+### **As a Javascript Developer**:
+- The learning curve to use this is more than shallow. 1 hour should be enough.
+- This is based on **plain Javascript/Typescript, HTML and CSS**. There is no abstraction layer.
+- From the very start **it is fun to work with**. You are back in control of your code without bigger frameworks, but you are able to interact with them.
+- You can **work for any customer right away**. **No training on their system required**, just fulfill their micro component requirements.
+- Over time, you can **build your own framework or functional libraries** from scratch.
+
+
+## Functional Requirements
+
+- I want to **enrich a standard HTMLElement instance with encapsuled and modular javascript**, without having to resort to web components or big frameworks.
+- I want to have an **interface** into this functionality that I can both tight and loosely couple.
+- I want to **import and use Micro Components in any framework** that allows for direct DOM access.
+- I want **a single location** in an HTMLElement instance where all this functionality is **stored and sufficiently organized**.
+- I want to be able to use **selectors** to find those instances in the DOM.
+- All this must stricly follow **web standards**.
+
+
+## Simple Usage:
+
+**Micro Components** can be added to to a DOM element like this:
+
+before:
+```HTML
+<button></button>
+```
+
+code: (assume "Button" is some class in a library)
+```javascript
+import 'MC' from 'twobirds/microcomponents';
+import 'Button' from 'tb/ui'; // made-up example library
+
+// select first button element in DOM
+let myButton = document.querySelector('button');
+
+// this will add the micro component to the myButton._mc property:
+MC.add( myButton, 'tb_ui_button', new Button( myButton, { ...config data } ) );
+```
+
+after:
+```HTML
+<button _mc></button>
+```
+_mc indicates that this HTML element contains at least one micro component. This is needed for the **selectors**.
+
+
+```javascript
+console.log( myButton._mc );
+// { tb_ui_button: { target: <button>, onClick: <function> } }
+```
+
+For detailed information jump to [Micro Component Usage](https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_usage.md?ref_type=heads);
+
+## History
+
+I have been working with this since 2004. I used this as core principle inside my twoBirds framework.
+
+This functionality has been used in very big and complicated data processing projects:
+- to allow for web component like programming (as early as 2004)
+- to encapsule UI handling
+- 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.
+
+## Contact
+Feel free to contact me for any questions or inquiries:
+
+email [Frank Thürigen](mailto:fthuerigen@gmail.com?subject=Micro%20Components) or [Skype](skype:frank.thuerigen)
+
+And yes, you can [fund this](https://gofund.me/076c614c).

package/checklist.md

@@ -0,0 +1,93 @@
+# MicroComponents
+
+
+
+## Getting started
+
+To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+
+Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+
+## Add your files
+
+- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
+- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
+
+```
+cd existing_repo
+git remote add origin https://gitlab.com/twoBirds/microcomponents.git
+git branch -M main
+git push -uf origin main
+```
+
+## Integrate with your tools
+
+- [ ] [Set up project integrations](https://gitlab.com/twoBirds/microcomponents/-/settings/integrations)
+
+## Collaborate with your team
+
+- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
+- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
+- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
+- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
+- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
+
+## Test and Deploy
+
+Use the built-in continuous integration in GitLab.
+
+- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
+- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing (SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
+- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
+- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
+- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
+
+***
+
+# Editing this README
+
+When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thanks to [makeareadme.com](https://www.makeareadme.com/) for this template.
+
+## Suggestions for a good README
+
+Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
+
+## Name
+Choose a self-explaining name for your project.
+
+## Description
+Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
+
+## Badges
+On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
+
+## Visuals
+Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
+
+## Installation
+Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
+
+## Usage
+Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
+
+## Support
+Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
+
+## Roadmap
+If you have ideas for releases in the future, it is a good idea to list them in the README.
+
+## Contributing
+State if you are open to contributions and what your requirements are for accepting them.
+
+For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
+
+You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
+
+## Authors and acknowledgment
+Show your appreciation to those who have contributed to the project.
+
+## License
+For open source projects, say how it is licensed.
+
+## Project status
+If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.

package/dist/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/dist/microcomponents.d.ts

@@ -0,0 +1,21 @@
+export declare class MC {
+    private target;
+    private privateMCs;
+    static debug: boolean;
+    constructor(target?: HTMLElement | null);
+    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;
+    siblings(search?: string): any[];
+    parent(search?: string): any[];
+    parents(search?: string): any[];
+    children(search?: string): any[];
+    descendants(search?: string): any[];
+}
+export interface HTMLElementMc extends HTMLElement {
+    _mc: MC;
+}
+//# sourceMappingURL=microcomponents.d.ts.map

package/dist/microcomponents.d.ts.map

@@ -0,0 +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"}

package/dist/microcomponents.es3.d.ts

@@ -0,0 +1,16 @@
+declare function __isEmpty(obj: any): boolean;
+declare function MC(target: any): void;
+declare class MC {
+    constructor(target: any);
+    _target: any;
+    siblings(search: any): any[];
+    parent(search: any): any;
+    parents(search: any): any[];
+    children(search: any): any[];
+    descendants(search: any): any[];
+}
+declare namespace MC {
+    function add(domElement: any, key: any, element: any): typeof MC;
+    function remove(domElement: any, key: any): typeof MC;
+}
+//# sourceMappingURL=microcomponents.es3.d.ts.map

package/dist/microcomponents.es3.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"microcomponents.es3.d.ts","sourceRoot":"","sources":["../src/microcomponents.es3.js"],"names":[],"mappings":"AAEA,8CAQC;AAED,uCAEC;;IAFD,yBAEC;IADA,aAAqB;IAqBtB,6BAcC;IAED,yBAUC;IAED,4BAUC;IAED,6BAeC;IAED,gCAcC;;;IAxFD,iEAMC;IAED,sDAMC"}

package/dist/microcomponents.es3.js

@@ -0,0 +1,96 @@
+"use strict";
+function __isEmpty(obj) {
+    if (!obj)
+        return false;
+    for (var key in obj) {
+        if (obj.hasOwnProperty(key) && key !== "_target") {
+            return false;
+        }
+    }
+    return true;
+}
+function MC(target) {
+    this._target = target;
+}
+// static functions, chainable
+MC.add = function (domElement, key, element) {
+    if (key && typeof key === "string" && domElement && !domElement._mc[key]) {
+        domElement.mc[key] = element;
+        domElement.setAttribute("_mc", "");
+    }
+    return this;
+};
+MC.remove = function (domElement, key) {
+    delete domElement._mc[key];
+    if (isEmpty(this)) {
+        this._target.removeAttribute("_mc");
+    }
+    return this;
+};
+// other methods, not chainable
+MC.prototype.siblings = function (search) {
+    var mcValues = [];
+    if (this._target._mc) {
+        for (var key in this._target._mc) {
+            if (key !== "_target" &&
+                this._target._mc.hasOwnProperty(key) &&
+                (!search || key === search)) {
+                mcValues.push(this._target._mc[key]);
+            }
+        }
+    }
+    return mcValues;
+};
+MC.prototype.parent = function (search) {
+    var mcValues = [];
+    var current = this._target.parentNode;
+    while (current) {
+        if (current._mc) {
+            return current._mc.siblings(search);
+        }
+        current = current.parentNode;
+    }
+    return mcValues;
+};
+MC.prototype.parents = function (search) {
+    var mcValues = [];
+    var current = this._target.parentNode;
+    while (current) {
+        if (current._mc) {
+            mcValues = mcValues.concat(current._mc.siblings(search));
+        }
+        current = current.parentNode;
+    }
+    return mcValues;
+};
+MC.prototype.children = function (search) {
+    var mcValues = [];
+    function traverseTree(element) {
+        var children = element.children;
+        for (var i = 0; i < children.length; i++) {
+            var child = children[i];
+            if (child._mc) {
+                mcValues = mcValues.concat(child._mc.siblings(search));
+                continue;
+            }
+            traverseTree(child);
+        }
+    }
+    traverseTree(this._target);
+    return mcValues;
+};
+MC.prototype.descendants = function (search) {
+    var mcValues = [];
+    function traverseTree(element) {
+        var children = element.children;
+        for (var i = 0; i < children.length; i++) {
+            var child = children[i];
+            if (child._mc) {
+                mcValues = mcValues.concat(child._mc.siblings(search));
+            }
+            traverseTree(child);
+        }
+    }
+    traverseTree(this._target);
+    return mcValues;
+};

package/dist/microcomponents.es3.min.js

@@ -0,0 +1,15 @@
+"use strict";function __isEmpty(obj){if(!obj)return false;for(var key in obj){if(obj.hasOwnProperty(key)&&key!=="_target"){return false;}}
+return true;}
+function MC(target){this._target=target;}
+MC.add=function(domElement,key,element){if(key&&typeof key==="string"&&domElement&&!domElement._mc[key]){domElement.mc[key]=element;domElement.setAttribute("_mc","");}
+return this;};MC.remove=function(domElement,key){delete domElement._mc[key];if(isEmpty(this)){this._target.removeAttribute("_mc");}
+return this;};MC.prototype.siblings=function(search){var mcValues=[];if(this._target._mc){for(var key in this._target._mc){if(key!=="_target"&&this._target._mc.hasOwnProperty(key)&&(!search||key===search)){mcValues.push(this._target._mc[key]);}}}
+return mcValues;};MC.prototype.parent=function(search){var mcValues=[];var current=this._target.parentNode;while(current){if(current._mc){return current._mc.siblings(search);}
+current=current.parentNode;}
+return mcValues;};MC.prototype.parents=function(search){var mcValues=[];var current=this._target.parentNode;while(current){if(current._mc){mcValues=mcValues.concat(current._mc.siblings(search));}
+current=current.parentNode;}
+return mcValues;};MC.prototype.children=function(search){var mcValues=[];function traverseTree(element){var children=element.children;for(var i=0;i<children.length;i++){var child=children[i];if(child._mc){mcValues=mcValues.concat(child._mc.siblings(search));continue;}
+traverseTree(child);}}
+traverseTree(this._target);return mcValues;};MC.prototype.descendants=function(search){var mcValues=[];function traverseTree(element){var children=element.children;for(var i=0;i<children.length;i++){var child=children[i];if(child._mc){mcValues=mcValues.concat(child._mc.siblings(search));}
+traverseTree(child);}}
+traverseTree(this._target);return mcValues;};

package/dist/microcomponents.js

@@ -0,0 +1,133 @@
+'use strict';
+export class MC {
+    target;
+    privateMCs = {};
+    static debug = false;
+    constructor(target = null) {
+        this.target = target;
+        this.privateMCs = {};
+    }
+    // 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', '');
+                }
+            }
+        }
+        return element;
+    }
+    // add a microcomponent to the DOM or to the private microcomponent collection
+    add(element = {}, key, target) {
+        // add the element
+        if (target && key) {
+            // ...to the DOM
+            MC.add(element, key, target);
+        }
+        else if (key) {
+            // ... to the private element collection
+            this.privateMCs[key] = element;
+        }
+        return element;
+    }
+    // remove a micro component from the DOM
+    static remove(target, key) {
+        const mc = target;
+        // 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) {
+        // 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
+    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;
+    }
+    // get all ancestor DOM nodes up to the document
+    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;
+    }
+    /*
+    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));
+    }
+    // first anchestor DOM node, all puclic MCs
+    parent(search) {
+        if (!this.target)
+            return [];
+        return this.traverseNodes(this.target.parentNode, search, true);
+    }
+    // all anchestor DOM nodes, beginning with the closest, all puclic MCs
+    parents(search) {
+        if (!this.target)
+            return [];
+        return this.traverseNodes(this.target.parentNode, search, false);
+    }
+    // nearest child DOM nodes, all puclic MCs
+    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;
+    }
+    // all descendant DOM nodes, all puclic MCs
+    descendants(search) {
+        const myDomElements = this.target.querySelectorAll('*[_mc]');
+        return this.getMicroComponents([...myDomElements], search);
+    }
+}

package/dist/microcomponents.min.js

@@ -0,0 +1,27 @@
+'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','');}}}
+return element;}
+add(element={},key,target){if(target&&key){MC.add(element,key,target);}
+else if(key){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;}
+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)
+return[];return this.traverseNodes(this.target.parentNode,search,true);}
+parents(search){if(!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);}}

package/docs/.nojekyll

@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.