@twobirds/microcomponents 0.0.10 → 0.0.12

package/README.md

@@ -21,7 +21,7 @@ Imagine your micro components to be organized like a "node_modules" directory th
 **On the server side** MCs can be used to organize your code, too.
 
 ## Status
-WIP. Micro components should be done soon, as in days.
+WIP. Should be done soon. In [manual testing](http://twobirds.gitlab.io/microcomponents/test.html).
 
 ## Disclaimer
 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. Later this will be backported into twoBirds as a dependency, and twoBirds will become completely modularized on the base of MCs.
@@ -40,9 +40,7 @@ This is a low-level approach. It consists of a single class with 3 static method
 
 For a short usage description goto [Micro Component Usage](https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_usage.md?ref_type=heads).
 
-Check the [typedoc API reference](http://twobirds.gitlab.io/microcomponents/docs/modules.html) if you want to drill into the source code.
-
-Or read the more detailed [jsdoc API documentation](http://twobirds.gitlab.io/microcomponents/jsdoc/es5+/index.html) which contains **examples**.
+Check the [typedoc API reference](http://twobirds.gitlab.io/microcomponents/classes/microcomponents.MC.html) if you want to drill into the source code.
 
 To see what can be done, go to [additional concepts](https://gitlab.com/twoBirds/microcomponents/-/blob/main/microcomponents_magic.md?ref_type=heads) which shows what it already has been used for.
 

package/assets/test.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 Manual Test</title>
+        </head>
+    <body>
+        <script  type="module" src="./test.js"></script>
+    </body>
+</html>

package/dist/microcomponents.d.ts

@@ -1,242 +1,26 @@
-/**
- * @module microcomponenents
- */
-/**
- * A static flag to enable or disable debugging mode.
- * @name debug
- * @memberOf MC
- * @static
- * @type {boolean} A static flag to enable or disable debugging mode.
- */
-/**
- * Retrieves all top-level microcomponents from a target HTMLElement.
- * @name siblings
- * @memberOf MC
- * @static
- * @function
- * @param {HTMLElement} target - The target DOM element.
- * @param {string} [search] - The key of the specific microcomponent to find.
- * @returns {Array<any>} An array of microcomponents or an empty array if none found.
- * @example
- * const siblings = MC.siblings(
- * &nbsp;document.getElementById('myElement'),
- * &nbsp;'myComponent'
- * );
- */
-/**
- * Adds a top level microcomponent to a target DOM node.
- * @name add
- * @memberOf MC
- * @static
- * @function
- * @param {HTMLElement} target - The target DOM element.
- * @param {string} key - The key to identify the microcomponent.
- * @param {any} [element={}] - The microcomponent to add.
- * @returns {any} The added microcomponent.
- * @example
- * const component = MC.add(
- * &nbsp;document.getElementById('myElement'),
- * &nbsp;'myComponent',
- * &nbsp;{}
- * );
- */
-/**
- * Removes a top level microcomponent from the target DOM node.
- * @name remove
- * @memberOf MC
- * @static
- * @function
- * @param {HTMLElement} target - The target DOM element.
- * @param {string} key - The key identifying the microcomponent.
- * @example
- * MC.remove(
- * &nbsp;document.getElementById('myElement'),
- * &nbsp;'myComponent'
- * );
- */
-/**
- * Manages microcomponents (MCs) attached to DOM elements, allowing for the
- * addition, removal, and traversal of microcomponents across siblings, parents,
- * children, and descendants.
- *
- * This class provides an API for interacting with microcomponents on DOM elements.
- * Public microcomponents are stored on the `_mc` attribute of the DOM element, while
- * private microcomponents are managed internally.
- *
- * @example
- * ```javascript
- *
- * // create the micro component class
- * class MyMC extends MC{
- *
- * &nbsp;constructor( target ){
- * &nbsp;&nbsp;super( target );
- * &nbsp;&nbsp;this.target = target;
- * &nbsp;}
- * }
- *
- * const element = document.querySelector('div')
- *
- * // Add the top level microcomponent to the target element
- * let mcc = MC.add(
- * &nbsp;element,
- * &nbsp;'myMC',
- * &nbsp;new MyMC( element )
- * );
- *
- * // Add an inner (private) microcomponent to mcc
- * let mcc.add(
- * &nbsp;'myInnerMC',
- * &nbsp;new MyMC( element )
- * );
- *
- * console.log( element._mc );
- * // { 'myMC': { target: (element) } }
- *
- * console.log( element._mc.myMC );
- * // { target: (element) }
- *
- * console.log( mcc.siblings() );
- * // [ { target: (element) } ]
- *
- * ```
- * @class
- * @name MC
- */
-declare class MC {
-    private target;
-    private privateMCs;
-    _mc?: {
+type HTMLElementMC = HTMLElement & {
+    _mc: {
         [key: string]: any;
     };
+};
+export declare class MC {
+    #private;
     static debug: boolean;
-    /**
-     * Constructs an MC instance with a target DOM element.
-     * @constructor
-     * @param {HTMLElement | { [key: string]: any }} - The target DOM element or any object.
-     */
-    constructor(target?: HTMLElement | {
+    constructor(target: {
         [key: string]: any;
-    } | undefined);
-    static siblings(target: HTMLElement, search?: string): any[];
-    static add(target: HTMLElement, key: string, element?: any): any[];
-    static remove(target: HTMLElement, key: string): void;
-    /**
-     * returns top level microcomponents from a list of HTMLElements.
-     * @name getMicroComponents
-     * @instance
-     * @function
-     * @private
-     * @param {Array<any>} elements - The elements to search for microcomponents.
-     * @param {string} [search] - The key of the specific microcomponent.
-     * @returns {Array<any>} An array of microcomponents.
-     */
-    private getMicroComponents;
-    /**
-     * returns ancestor MCs
-     * @name traverseNodes
-     * @instance
-     * @function
-     * @private
-     * @param {Node | null} node - The starting DOM node.
-     * @param {string} [search] - The key of the specific microcomponent.
-     * @param {boolean} [firstonly=true] - If true, returns the first match only.
-     * @returns {Array<any>} An array of matching microcomponents.
-     */
-    private traverseNodes;
-    /**
-     * returns true if the element is an instance of HTMLElement.
-     * @instance
-     * @function
-     * @name isDOM
-     * @private
-     * @type {Function}
-     * @param {any} element - The element to check.
-     * @returns {boolean}
-     */
-    private isDOM;
-    /**
-     * adds a microcomponent to the private collection.
-     * @name add
-     * @instance
-     * @function
-     * @param {string} [key] - The key to identify the microcomponent.
-     * @param {any} [element={}] - The microcomponent to add.
-     * @returns {any} The added microcomponent.
-     * @example
-     * const privateComp = this.add('privateComponent', {});
-     */
-    add(key?: string, element?: any): any;
-    /**
-     * removes a microcomponent from the private collection.
-     * @name remove
-     * @instance
-     * @function
-     * @param {string} [key] - The key to identify the microcomponent.
-     * @example
-     * this.remove('privateComponent');
-     */
-    remove(key: string): void;
-    /**
-     * removes a microcomponent from the private collection.
-     * @name siblings
-     * @instance
-     * @function
-     * @param {string} [search] - The key of the specific microcomponent.
-     * @returns {Array<any>} An array of matching sibling microcomponents.
-     * @example
-     * const siblings = this.siblings('siblingComponent');
-     */
+    });
+    get _mc(): undefined | any;
+    get target(): any;
+    static siblings(target: HTMLElementMC, search?: string): any[];
+    static add(target: HTMLElement, key: string, element?: {}): any;
+    static remove(target: HTMLElementMC, key: string): void;
+    add(key: string, element: any, target?: HTMLElement): any;
+    remove(key: string, target?: HTMLElement): void;
     siblings(search?: string): any[];
-    /**
-     * retrieves the first ancestor DOM node with a matching microcomponent.
-     * @name parent
-     * @instance
-     * @function
-     * @param {string} [search] - The key of the specific microcomponent.
-     * @returns {Array<any>} An array with the matching microcomponent.
-     * @example
-     * const parent = mcInstance.parent('parentComponent');
-     */
-    /**
-     */
     parent(search?: string): any[];
-    /**
-     * retrieves the first ancestor DOM node with a matching microcomponent.
-     * @name parents
-     * @instance
-     * @function
-     * @param {string} [search] - The key of the specific microcomponent.
-     * @returns {Array<any>} An array of matching ancestor microcomponents.
-     * @example
-     * const parents = mcInstance.parents('ancestorComponent');
-     */
     parents(search?: string): any[];
-    /**
-     * retrieves nearest child _mc DOM nodes, gets their matching microcomponents, and stops there.
-     * @name children
-     * @instance
-     * @function
-     * @param {string} [search] - The key of the specific microcomponent.
-     * @returns {Array<any>} An array of matching child microcomponents.
-     * @example
-     * const children = mcInstance.children('childComponent');
-     */
     children(search?: string): any[];
-    /**
-     * retrieves all decendant _mc DOM nodes and gets their matching microcomponents.
-     * @name children
-     * @instance
-     * @function
-     * @param {string} [search] - The key of the specific microcomponent.
-     * @returns {Array<any>} An array of matching descendant microcomponents.
-     * @example
-     * const descendants = mcInstance.descendants('descendantComponent');
-     */
     descendants(search?: string): any[];
 }
-export interface HTMLElementMc extends HTMLElement {
-    _mc: MC;
-}
-export { MC };
+export {};
 //# sourceMappingURL=microcomponents.d.ts.map

package/dist/microcomponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"microcomponents.d.ts","sourceRoot":"","sources":["../src/microcomponents.ts"],"names":[],"mappings":"AAEA;;GAEG;AAEH;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AAEH;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;GAaG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,cAAM,EAAE;IAEP,OAAO,CAAC,MAAM,CAAmD;IAE9D,OAAO,CAAC,UAAU,CAA8B;IAEzC,GAAG,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAM;IAEzC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAS;IAE9B;;;;OAIG;gBACU,MAAM,GAAE,WAAW,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,GAAG,SAAqB;IA0BjF,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;IAO5D,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,GAAQ,GAAG,GAAG,EAAE;IAiBtE,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAcrD;;;;;;;;;OASG;IACH,OAAO,CAAC,kBAAkB;IAwB1B;;;;;;;;;;OAUG;IACH,OAAO,CAAC,aAAa;IAkBrB;;;;;;;;;OASG;IACH,OAAO,CAAC,KAAK;IAIhB;;;;;;;;;;OAUG;IACA,GAAG,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,GAAE,GAAQ,GAAG,GAAG;IAO5C;;;;;;;;OAQG;IACA,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAM5B;;;;;;;;;OASG;IACA,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;IAYnC;;;;;;;;;OASG;IACA;OACG;IACH,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;IAK9B;;;;;;;;;OASG;IACH,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;IAK/B;;;;;;;;;OASG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;IAWhC;;;;;;;;;OASG;IACH,WAAW,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE;CAStC;AAED,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,EAAE,CAAC;CACR;AAED,OAAO,EAAE,EAAE,EAAE,CAAC"}
+{"version":3,"file":"microcomponents.d.ts","sourceRoot":"","sources":["../src/microcomponents.ts"],"names":[],"mappings":"AAiDA,KAAK,aAAa,GAAG,WAAW,GAAG;IAAE,GAAG,EAAE;QAAE,CAAC,GAAG,EAAC,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CAAE,CAAA;AAEjE,qBAAa,EAAE;;IAMd,MAAM,CAAC,KAAK,EAAE,OAAO,CAAS;gBAEjB,MAAM,EAAE;QAAE,CAAC,GAAG,EAAC,MAAM,GAAG,GAAG,CAAA;KAAE;IAK1C,IAAI,GAAG,IAAI,SAAS,GAAG,GAAG,CAGzB;IAED,IAAI,MAAM,IAAI,GAAG,CAEhB;IAGD,MAAM,CAAC,QAAQ,CAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAE,MAAW,GAAI,GAAG,EAAE;IAiBpE,MAAM,CAAC,GAAG,CAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,KAAK,GAAI,GAAG;IAuBjE,MAAM,CAAC,MAAM,CAAE,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM;IAkBjD,GAAG,CAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAI,GAAG;IAgB3D,MAAM,CAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,GAAI,IAAI;IAiBjD,QAAQ,CAAE,MAAM,GAAE,MAAW,GAAI,GAAG,EAAE;IAetC,MAAM,CAAE,MAAM,GAAE,MAAW,GAAI,GAAG,EAAE;IAOpC,OAAO,CAAE,MAAM,GAAE,MAAW,GAAI,GAAG,EAAE;IAOrC,QAAQ,CAAE,MAAM,GAAE,MAAW,GAAI,GAAG,EAAE;IActC,WAAW,CAAE,MAAM,GAAE,MAAW,GAAI,GAAG,EAAE;CAOzC"}

package/dist/microcomponents.es3.d.ts

@@ -1,6 +1,11 @@
 declare function __isEmpty(obj: any): boolean;
 declare function MC(target: any): void;
 declare class MC {
+    static add(target: any, key: any, element?: {}): {};
+    static remove(target: any, key: any): void;
+    static debug: boolean;
+    static siblings(target: any, search?: string): any;
+    constructor(target: any);
     constructor(target: any);
     _target: any;
     siblings(search: any): any[];

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

@@ -1 +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"}
+{"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"}