@twobirds/microcomponents 0.0.34 → 0.0.39

package/README.md

@@ -1,43 +1,35 @@
-## MICRO COMPONENTS
+![logo](./MicroComponents.svg)
 
-![Micro Components Logo](https://gitlab.com/twoBirds/microcomponents/-/raw/main/MicroComponents.svg)
+## MICRO COMPONENTS
 
 **This code aims at improving Javascript modularity and encapsulation**.
 
 Using micro components enforces **DRY, KISS and SOLID** principles in Javascript programming.
 
-## Status
-
-**WIP**. Should be done soon. In [manual testing](http://twobirds.gitlab.io/microcomponents/test.html), also working a lot on the documentation.
-
-## Skippable Disclaimer
-I decided to extract this functionality from the [twoBirds framework](https://www.npmjs.com/package/twobirds-core), because it is a useful tool in itself and it is framework agnostic. It relies solely on the standard DOM and native javascript or typescript.
-
-Later this will be backported into twoBirds as a dependency, and twoBirds will become completely modularized on the base of MCs.
+## Think **Building Blocks**
 
-This is a massive undertaking. MCs are just the foundation of what I do. **I am about to dump** [20+ years of javascript programming](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/magic.md?ref_type=heads#things-i-already-did-with-this-in-my-own-framework-twobirds-or-in-apps-that-i-developed-with-it) **into open source libraries**, so feel free to [fund this](https://www.gofundme.com/f/nachhaltige-programmierung). The better this is funded, the faster it will be done. Given enough resources, I will start a crowdfunded company that will develop a new open source ecosystem for javascript/typescript programming. By **"Open Source"** I mean **really free and open**, as **you get all my inner source code with it**. Once you understand the Micro Component principle, you are back in command of your software, no matter what MC functionality you import in your system. Since **Micro Components** are encapsuled, off-shoring and near-shoring is no problem, and reusability is guaranteed. Your external coders do not need to access your code repository or your toolchain. They only need to understand MCs.
+When coding with this system, you create classes that extend either the **[MC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MC.md?ref_type=heads#mc-class-extends-mcbase)** or **[DC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MC.md?ref_type=heads#dc-class-extends-mcbase)** superclasses provided here. These classes provide the structure you need to build your wonderland.
 
-## General
-
-**This is a low-level OOP approach to Javascript programming.**
+In an almost literal sense they work like childrens building blocks, where a chest full of unassuming parts lets you compose whatever functionality lies in your imagination.
 
-It aims at proving that strict OOP is a valid alternative to other frameworks functional approaches.
+This systems **modular** approach gives you full control over your software, without the need to rely on other frameworks. On the other hand, its **minimalistic** stance enables you to use the resulting functionality in any other framework, and makes the **learning curve neglectable**.
 
-You can use it in vanilla JS or Typescript coding environments. It has been used to create very complex single page applications.
+## Status
 
-Also you can use it in any other framework to enhance it with missing functionality.
+**WIP**. Should be done soon. In [manual testing](http://twobirds.gitlab.io/microcomponents/test.html), also working a lot on the documentation.
 
-This functionality is **portable**, so you can **reuse your MCs** - e.g. originally written in the context of an **Angular** project - in your next **react** project right away.
+## General
 
-In its core it consists of a two classes named **MC** and **DC**. Your class code extends from one of these classes.
+- **This is a low-level OOP approach to Javascript programming.** It aims at proving that strict OOP is a valid alternative to other frameworks functional approaches.
+- You can use it in vanilla JS or Typescript coding environments.
 
 This repository exports 5 independent functionalities:
 
-1. **[Micro Components](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MicroComponents.md?ref_type=heads)** contains the **MC** and **DC** classes you can use as super classes.
-2. **Custom Elements** lets you define and retrieve your own custom elements based on your DC instance code. Uses and re-exports (1).
-3. **Convenience Observables** adds observability and run time type safety to object properties.
-4. **Form Values** gives you 2-way binding between a HTML form and an observable.
-5. (tbd) **Convenience Selectors** provide jQuery like selectors for both the DOM and micro components.
+1. **[Micro Components](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MC.md?ref_type=heads)** contains the **MC** and **DC** classes you can use as super classes.
+2. **[Elements](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/elements.md?ref_type=heads)** lets you define and use your own native web components. Uses (1).
+3. (wip) **Observables** add **observability** and **run time type safety** to object properties. Also they provide **1-way binding** to placeholders in your template HTML.
+4. (wip) **FormValues** gives you **2-way binding** between a HTML form and an observable object. Uses (3).
+5. (wip) **Selectors** provide chainable jQuery like selectors for both the DOM and micro components.
 
 Also there is a bundle file that contains all of the above.
 
@@ -45,7 +37,7 @@ Check the [typedoc API reference](https://twobirds.gitlab.io/microcomponents/mod
 
 To see what can be done, go to [additional concepts](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/magic.md?ref_type=heads) which shows what it already has been used for.
 
-## Simple Usage:
+## Simple Usage Example
 
 **Micro Components** can be added to to a DOM element like this:
 
@@ -90,9 +82,30 @@ after:
 ```HTML
 <div _mc></div>
 ```
-_mc indicates that this HTML element contains at least one micro component. This is needed for the selectors.
+The `_mc` **attribute** indicates that this **HTML element contains at least one micro component**. This is needed for the selectors.
+
+The `_mc` **attribute** and **property** are the only interference with the DOM, so any other system should be happy to work with this.
+
+## Disclaimer
+I decided to extract this functionality from the [twoBirds framework](https://www.npmjs.com/package/twobirds-core), because it is a useful tool in itself and it is framework agnostic. It relies solely on the standard DOM and native javascript or typescript.
+
+Later this will be backported into twoBirds as a dependency, and twoBirds will become completely modularized on the base of MCs.
+
+**This is a massive undertaking.** MCs are just the foundation of what I do. I am about to dump [20+ years of javascript programming](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/magic.md?ref_type=heads#things-i-already-did-with-this-in-my-own-framework-twobirds-or-in-apps-that-i-developed-with-it) into open source libraries, so feel free to [fund this](https://www.gofundme.com/f/nachhaltige-programmierung). The better this is funded, the faster it will be done. Given enough resources, I will start a crowdfunded company that will develop a new open source ecosystem for javascript/typescript programming. By **"Open Source"** I mean **really free and open**, as **you get all my inner source code with it**. Once you understand the Micro Component principle, you are back in command of your software, no matter what MC functionality you import in your system.
+
+Since **Micro Components** are encapsuled, off-shoring and near-shoring is no problem, and reusability is guaranteed. Your external coders do not need to access your code repository or your toolchain. They only need to understand MCs.
+
+## Distinct differences to other frameworks
+
+There are a few potentially unique aspects of this micro components system that might differentiate it from other frameworks:
+
+- **Pure OOP Approach**: The system explicitly positions itself as a strict object-oriented alternative to the functional approaches that dominate many modern frameworks.
+- **Minimal Interference**: The system has minimal DOM interference (only adding _mc attribute and property). This makes it unusually compatible with other frameworks or libraries.
+- **Hierarchical Component Traversal**: The built-in parent/child/ancestor/descendant traversal methods provide a clean way to navigate component relationships.
+- **Direct DOM Integration**: Unlike virtual DOM-based frameworks, this approach works directly with the actual DOM while still providing component encapsulation.
+- **Outsourcing Potential**: Your external coders do not need to access your code repository or your toolchain.
 
-The _mc attribute and properties are the only interference with the DOM, so every other system should be happy to work with this.
+The strongest argument might be for developers who prefer OOP, want minimal framework lock-in, and need a lightweight solution that works well with existing code or other libraries.
 
 ## Contact
 Feel free to contact me for any questions or inquiries:

package/assets/documentation/{MicroComponents.md → MC.md}

@@ -1,4 +1,4 @@
-# Micro Components
+# Micro Components <span style="float:right; height:1em;"><img height="24px" src="./MicroComponents.svg" /></span>
 
 This system allows you to to define **Micro Components** and attach them to DOM elements or other Micro Components.
 
@@ -6,15 +6,12 @@ The module exports 2 classes:
 - **MC**: Micro Component ( not DOM related, works on the server also )
 - **DC**: Dom Component ( extends MC and adds DOM related methods, client only )
 
-## tldr;
-
-In general when coding with this system, you create classes that extend either the **DC** or **MC** class provided here.
-
-**If your functionality needs to access the DOM**, e.g. to find other DC instances, **your class extends DC**.
+# Usage
 
-**Otherwise** - and always on the server - **your class extends MC**.
+- **If your functionality needs to access the DOM**, e.g. to find other DC instances, **your class extends DC**.
+- **Otherwise** - and always on the server - **your class extends MC**.
 
-In any case, your class instances will contain a property **"_mc"** where you can put in other MCs.
+In any case, your class instances will contain a property **"_mc"** where you can (but don't have to) put in other MCs.
 
 Also your class instances will have a readonly **"target"** property that is back reference to the instance they are contained in.
 
@@ -27,25 +24,28 @@ As an application programmer you should understand **MC** and **DC** methods and
 - **DC** use observables and formValues to provide 1-way and 2-way binding to the DOM.
 - **DC** have selectors to find other DCs in the DOM.
 
-# Prerequisites
+# Rules
 
 - **Your own application code MUST NOT overwrite the properties and methods in the classes below.**
 - If you do it anyway, you do it on your own risk.
 
 # Not Exported
 
-## McBase() Superclass
+## **McBase** Superclass
 
   **Instance Properties**
   - `.target`: readonly, a getter returning the DOM element or parent MC instance your instance resides in
 
   **Constructor:**
   - calls `init()`: triggers the 'init' lifecycle event, also recursively into the inner '._mc' structure.
-  - calls `autoAttachListeners()`: methods in your MC that start with "on[A-Z]" or "one[A-Z]" and describe native DOM events (e.g. "onClick") will be added to the DOM Element as listeners.
+  - calls `autoAttachListeners()`: methods in your class code that start with "on[A-Z]" or "one[A-Z]" and describe native DOM events (e.g. "onClick") will be added to the DOM Element as listeners.
+
+- **Instance Methods:**
+  - `.trigger( eventName, data )`: runs callback methods.
 
 # Exported:
 
-## MC() Class, extends McBase
+## **MC** Class, extends McBase
 
   **Instance Properties**
   - `.target`: (inherited from McBase)
@@ -54,7 +54,7 @@ As an application programmer you should understand **MC** and **DC** methods and
 - **Instance Methods:**
   - `.trigger( eventName, data )`: (inherited from McBase)
 
-## DC() Class, extends McBase
+## **DC** Class, extends McBase
 
 - **Static Methods:**
   - `DC.add( DomElement, key, mc)`: Add a DC to an HTMLElement.
@@ -72,7 +72,7 @@ As an application programmer you should understand **MC** and **DC** methods and
   - `.descendants(search?)`: Get descendant DCs.
   - `.trigger( eventName, data, bubble )`: trigger an event on "this", handles directional bubbling in the DOM.
 
-# Usage
+# Examples
 
 ## Typical Workflow
 
@@ -105,12 +105,12 @@ MyPublicClass = class extends DC{
 }
 
 // attach a DC
-DC.add( myElement, 'myDcComponent', new MyClass( myElement ) );
+DC.add( myElement, 'myDcComponent', new MyPublicClass( myElement ) );
 ```
 
 #### **Hint**
-- After you added a micro component using this function, the **HTMLElement will contain a property `_mc`** which contains the external MC instances.
-- Also the **HTMLElement then has an attribute '_mc'** which will indicate that at least one micro component is attached to this dom element.
+- After you added a micro component using this function, the **HTMLElement will contain a property `_mc`** which contains the MC instances visible in the DOM.
+- Also the **HTMLElement then has an attribute '_mc'** to indicate that at least one micro component is attached to this dom element.
 
 ### Remove a top level Micro Component from a DOM element
 

package/assets/documentation/elements.md

@@ -0,0 +1,276 @@
+# Custom Elements <span style="float:right; height:1em;"><img height="24px" src="https://gitlab.com/twoBirds/microcomponents/-/raw/main/MicroComponents.svg" /></span>
+
+Custom Elements provides two funktions:
+- **defineCE()** lets you define a custom tag and add functionality to it. Internally it uses [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define).
+- **getCE()** retrieves a custom element constructor from the web component registry via [CustomElementRegistry.get()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/get).
+
+# Prerequisites
+
+You should at least know Micro Components **[DC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MicroComponents.md?ref_type=heads#dc-class-extends-mcbase)** superclass usage, since your own class code extends from it and uses its static functions. It is recommended that you have read and understood the **[Micro Component documentation](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MicroComponents.md?ref_type=heads)**, since custom elements is just an extension that internally uses micro components.
+
+# Usage
+
+## Create a Custom Element
+
+Before:
+
+```html
+<body></body>
+```
+
+```javascript
+defineCE(
+	// equivalent to and internally using customElementRegistry.define()
+	"my-tag",
+	class MyTag extends DC {
+
+		constructor(target, data = {} ) {
+			super(target);
+			this.data = data;
+			target.innerHTML = "Hello World";
+		}
+	}
+);
+
+let MyTag = getCE("my-tag"),
+	data = { a: 1 },
+	myTag = new MyTag( data );
+
+/*
+HINT:
+At this point the web component is not yet attached to the DOM.
+But you can perform any operation on it, e.g. calling methods on its inner micro components.
+*/
+
+document.body.append( myTag );
+```
+
+After:
+```html
+<body>
+	<my-tag _mc>Hello World</my-tag>
+</body>
+```
+
+### **Hints**
+- Your code extends the **[DC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MicroComponents.md?ref_type=heads#dc-class-extends-mcbase)** superclass. This superclass provides methods to traverse the DOM and select other micro components contained in HTML elements.
+- it is essential to understand that your web component code is only one of the numerous micro components that can reside inside `<my-tag>`
+- After you created a custom element, the custom element will contain a **property `<my-tag>._mc`** which contains your class instance.
+- Also the custom element then has an **attribute '_mc'** which will indicate that at least one micro component is attached to it.
+- Note that you can hand over data natively via parameters, when handling custom elements in above way.
+- The native way of usage, simply adding the tag to the template, is still possible. You have to use attributes then to hand in data.
+
+
+## Web Component Lifecycle Events
+
+```javascript
+defineCE(
+	"my-tag",
+	class MyTag extends DC {
+
+		constructor(target) {
+			super(target);
+			target.setAttribute('my-attribute', 'change me');
+		}
+
+		/*
+		web component specific event handlers
+		*/
+
+		onConnected(ev) {
+			console.info("MyTag .onConnected() handler", ev);
+		}
+
+		onAttributeChanged(ev) {
+			console.info("MyTag .onAttributeChanged() handler", ev);
+		}
+
+		onAdopted(ev) {
+			console.info("MyTag .onAdopted() handler", ev);
+		}
+
+		onDisconnected(ev) {
+			console.info("MyTag .onDisconnected() handler", ev);
+		}
+	},
+	['my-attribute'] // DOM node attributes to observe
+);
+
+let MyTag = getCE("my-tag"),
+	myTag = new MyTag();
+
+document.body.append( myTag );
+```
+
+You can use your Web Component constructor to add other modules to the `<my-tag>` DOM node:
+
+```javascript
+
+class OtherModule extends DC {
+
+	constructor(target) {
+		super(target);
+	}
+
+	onConnected(ev) {
+		console.info("[OtherModule] .onConnected() handler", ev);
+	}
+}
+
+defineCE(
+	"my-tag",
+	class MyTag extends DC {
+
+		constructor(target) {
+			super(target);
+			DC.add( target, 'otherModule', new OtherModule(target) );
+			// equivalent:
+			// target._mc.otherModule = new OtherModule(target);
+		}
+
+		onConnected(ev) {
+			console.info("[MyTag] .onConnected() handler", ev);
+		}
+	}
+);
+
+
+let MyTag = getCE("my-tag");
+
+document.body.append( new MyTag() );
+```
+
+### **Hints**
+- You can add as many other micro components to the DOM node as you like.
+- The native web component lifecycle events will be triggered on **all** micro components.
+- The event parameter handed over is an internal event instance, that contains the original native event in its `data` property.
+
+## Native Event Handlers
+
+Native event handlers will be auto-attached, when the method name follows one of these two schemes:
+
+- **on[A-Z]...**: e.g. **onClick(){ ... }** will be called when the native event is triggered
+- **one[A-Z]...**: e.g. **oneClick(){ ... }** will be called **once** only when the native event is triggered. Subsequent events will be ignored.
+
+```javascript
+defineCE(
+	"my-tag",
+	class MyTag extends DC {
+
+		constructor(target) {
+			super(target);
+			target.innerHTML = "Click Me";
+		}
+
+		/*
+		native event handlers
+		*/
+		onClick(ev) {
+			console.info("MyTag .onClick() handler", ev);
+		}
+	}
+);
+
+let MyTag = getCE("my-tag");
+
+document.body.append( new MyTag() );
+```
+
+### **Hints**
+- The native web component lifecycle events will be triggered on **all** micro components contained in the custom element, provided the MC contains a matching named handler.
+- The event parameter handed over is an internal event instance, that contains the original native event in its .data property.
+
+## Lifecycle Event Handlers
+
+Currently there is only one lifecycle event handler: the **oneInit(){ ... }** method you provide with your class.
+
+This method is triggered asynchronous via a timeout after you made a new instance of your class.
+
+```javascript
+defineCE(
+	"my-tag",
+	class MyTag extends DC {
+
+		constructor(target) {
+			super(target);
+			target.innerHTML = "Hello World";
+		}
+
+		/*
+		lifecycle event handlers
+		*/
+		oneInit(ev) {
+			console.info("MyTag .onInit() handler", ev);
+		}
+	}
+);
+
+let MyTag = getCE("my-tag");
+
+document.body.append( new MyTag() );
+```
+
+### **Hints**
+- The native web component lifecycle events will be triggered on **all** micro components contained in the custom element, provided the specific micro component contains a matching named handler.
+- The event parameter handed over is an internal event instance that contains no data.
+
+## Custom Events
+
+```javascript
+defineCE(
+	"my-tag",
+	class MyTag extends DC {
+
+		constructor(target) {
+			super(target);
+			target.innerHTML = "Hello World";
+		}
+
+		/*
+		custom event handlers
+		*/
+		onSpecialEvent(ev) {
+			console.log('MyTag .onSpecialEvent() handler', ev);
+		}
+	}
+);
+
+let MyTag = getCE("my-tag");
+
+document.body.append( new MyTag() );
+
+document
+	.querySelector( 'my-tag' )
+	?._mc
+	.MyTag
+	.trigger('specialEvent');
+
+/*
+Alternatives:
+*/
+
+document
+	.querySelector( 'my-tag' )
+	?._mc
+	.trigger('specialEvent'); // ...on all micro components contained in <my-tag>
+
+/*
+traversing the DOM:
+<my-tag>
+	<my-inner-tag />
+</my-tag>
+*/
+
+// <my-tag> method:
+onSpecialEvent(ev){
+	console.log( ev.data );
+}
+
+// <my-inner-tag> method:
+sendSpecialEvent(){
+	this.trigger( 'specialEvent', "Hello World", 'u' ); // 'u' = bubble up.
+}
+```
+
+### **Hints**
+- The event parameter handed over is an internal event instance, that contains the payload in its .data property.

package/assets/documentation/magic.md

@@ -1,63 +1,12 @@
-# Additional concepts: how to make the magic happen...
-
-**Micro Components** can literally be anything you can put into an object as a property.
-
-Here are some examples of what **Micro Components** can really archieve.
-
-
-## The MC() class can be used as a selector of its own, even if you dont attach a micro component yourself
-
-Since MC is a class you instanciate with a target element as your selection root element, and you can do this:
-
-```javascript
-const myElement = document.getElementById('myDiv');
-
-// find the nearst MC parent elements to this HTMLElement
-const myParent = ( new MC( myElement ) ).parent();
-```
-
-## Since MC() is a class, you can extend your own micro components with it and have the selectors nicely available
-
-Here is some typical usage:
-
-```javascript
-class MyMicroComponent extends MC {
-
-	constructor( target ){
-		super(target);
-	}
-
-	showParents(){
-		console.log( this.parents() ); // Logs all anchestor micro components
-	}
-}
-
-let myDiv = document.querySelector('div');
-
-MC.add( myDiv, 'my_micro_component', new MyMicroComponent( myDiv ) );
-
-// TADA!
-myDiv
-	._mc
-	.my_micro_component
-	.showParents();
-```
-
-As you can see, without any effort you have a **second structural layer that hovers over the DOM**.
-
-The browser knows nothing of this, except that there may be _mc properties on some HTMLElements.
-
-It doesnt get more standard compliant than that.
-
-
-## Things I already did with this, in my own framework twoBirds, or in apps that I developed with it:
+# Things I already did with this...
 
 - `encapsulated and modular 3D rendering` in an HTMLElement viewport.
-- `Data Driven Workflow` with micro components using tB specific observables.
+- `Data Driven Workflow` with micro components using observables.
 - `DOM handling` in general, lots of `UI functionality`
-- `2 way Data Binding` between forms and observable objects representing the form data
 - `1 way Data Binding` from data observables to the DOM
-- `Loose Coupling` via my own event objects
+- `2 way Data Binding` between forms and observables representing the form data
+- `progressive enhancement` / `graceful degradation` on standard websites
+- `Loose Coupling` via custom event objects
 - `Rule Engines`
 - `Complex Runtime Templating` without JSX or virtual DOM
 - `Single Page Applications`
@@ -65,23 +14,16 @@ It doesnt get more standard compliant than that.
 - `Electron Apps`
 - `Progressive Web Apps`
 - `Complex Native Web Components`, that comprised of a set of modular `UI` and `business logic` micro components
-- this ran on the `server` also, in standalone linux nodeJs processes. I removed this some time ago because I didnt want server and client code in one library. Now its easy to make a server variant of the micro component code if required.
+
+- `server side` structure in general.
 
 
 Funny stuff:
 
-- `Vending Machine Frontends`
-- some `Simulators`
-- `UI for ocean going container ships`
+- `Vending Machine Frontend` ( selling lottery tickets )
+- `UI for ocean going container ships` ( a wave impact stress simulator frontend )
 
 
 Not from me, but somehow based on my ideas:
 
-- `SpaceX` uses web components as an interface in their `Dragon Capsule`. I kind of regard myself to be a co-inventor of web components, since I announced my idea on ajaxian.com in 2007. Anyway, much later the [User defined built in elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#customized_built-in_elements) were a copy of what I already had then. So in a way, this already goes to space.
-
-
-
-This list is far from complete, I used this as a core principle for 20 years. All of the above is modular, so you can use it together.
-
-
-**Whatever functionality you can do with Javascript, you can encapsule it in a micro component and reuse in any framework that allows for DOM access**.
+- `SpaceX` uses web components as an interface in their `Dragon Capsule`. I regard myself to be a co-inventor of web components, since I announced my idea on ajaxian.com in 2007. Much later, [User defined built in elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#customized_built-in_elements) were a copy of what I already had back then. So in a way, this already goes to space.

package/assets/my-tag.css

@@ -1,10 +1,14 @@
-my-tag {
+my-tag > button {
 	border: 2px solid gray;
 	margin: 3px;
 	padding: 2px 5px;
 	display: inline-block;
 }
 
-my-tag:hover {
+my-tag.clicked > button {
+	border-color: blue;
+}
+
+my-tag > button:hover {
 	border-color: red;
 }

package/dist/MC.d.ts

@@ -5,12 +5,12 @@ export interface HTMLMcElement extends HTMLElement {
 }
 declare function addListener(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject | null, capture?: boolean, once?: boolean): void;
 declare function removeListener(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject | null): void;
-declare function trigger(target: unknown, ev: McEvent | string, data?: any): void;
+declare function trigger(target: HTMLElement, ev: McEvent | string, data?: any, bubble?: string): void;
 declare class McBase {
     #private;
     constructor(target?: {
         [key: string]: any;
-    });
+    }, debug?: boolean);
     get target(): any;
 }
 declare class MC extends McBase {
@@ -25,8 +25,7 @@ declare class DC extends McBase {
     _mc: {
         [key: string]: any;
     };
-    constructor(target: HTMLElement);
-    static debug: boolean;
+    constructor(target: HTMLElement, debug?: boolean);
     static add: Function;
     static remove: Function;
     static trigger: Function;

package/dist/MC.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAWvC,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA6CD,iBAAS,WAAW,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,GAAG,IAAI,EAAE,OAAO,GAAE,OAAe,EAAE,IAAI,GAAE,OAAe,QAe1J;AAED,iBAAS,cAAc,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,GAAG,IAAI,QAE5G;AAgDD,iBAAS,OAAO,CAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,QAUtE;AA0ED,cAAM,MAAM;;gBAIE,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAC,MAAM,GAAG,GAAG,CAAA;KAAE;IAW3C,IAAI,MAAM,IAAI,GAAG,CAEhB;CAED;AAED,cAAM,EAAG,SAAQ,MAAM;IAEtB,GAAG,EAAE;QAAE,CAAC,GAAG,EAAC,MAAM,GAAG,GAAG,CAAA;KAAE,CAAM;gBAEpB,MAAM,CAAC,EAAE,GAAG;IAIrB,MAAM,CAAC,OAAO,iBAAW;IAE5B,OAAO,CAAE,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;CAiF9D;AAED,cAAM,EAAG,SAAQ,MAAM;IAEtB,GAAG,EAAE;QAAE,CAAC,GAAG,EAAC,MAAM,GAAG,GAAG,CAAA;KAAE,CAAM;gBAEpB,MAAM,EAAE,WAAW;IAI/B,MAAM,CAAC,KAAK,EAAE,OAAO,CAAS;IAE9B,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,OAAO,CAAE,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;IAI9D,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAYpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAOvC;AAED,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAevC,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA8CD,iBAAS,WAAW,CACnB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,EAClD,OAAO,GAAE,OAAe,EACxB,IAAI,GAAE,OAAe,QAarB;AAED,iBAAS,cAAc,CACtB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,QAGlD;AAmDD,iBAAS,OAAO,CACf,MAAM,EAAE,WAAW,EACnB,EAAE,EAAE,OAAO,GAAG,MAAM,EACpB,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAwBpB;AAiGD,cAAM,MAAM;;gBAGC,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAWnE,IAAI,MAAM,IAAI,GAAG,CAEhB;CACD;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAM;gBAErB,MAAM,CAAC,EAAE,GAAG;IAIxB,MAAM,CAAC,OAAO,iBAAW;IAEzB,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;CAmElE;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAM;gBAErB,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;IAI7D,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAYpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAMvC;AAED,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC"}