@twobirds/microcomponents 0.1.20 → 0.1.21

package/README.md

@@ -18,8 +18,6 @@ The distinguishing feature - compared to other frameworks - is its **minimalism*
 
 ## Status
 
-For a quick glance try [this](https://gitlab.com/twoBirds/mc_template_webcomponents)...
-
 In [manual testing](https://twobirds.gitlab.io/microcomponents/test/test.html) ( also a speed test).
 
 Check the [typedoc API reference](https://twobirds.gitlab.io/microcomponents/typedoc/index.html) if you want to drill into the source code.
@@ -30,9 +28,9 @@ The progress of coding is being streamed on [twitch](https://twitch.tv/frankieth
 
 ### **Micro Components**
 
-**Hint:** This code only shows how Micro Components are stored in the DOM.
+**Hint:** The following code only shows how Micro Components are stored in the DOM.
 
-before:
+html before:
 ```HTML
 <div></div>
 ```
@@ -69,7 +67,7 @@ element
 	.helloWorld();
 ```
 
-after:
+html after:
 ```HTML
 <div data-mc></div>
 ```
@@ -134,7 +132,7 @@ class MyMC extends DC{
 		this.state.bind( target ); // links the state to DOM placeholders
 
 		// attach your own callbacks
-		this.state.observe( (value) => { 
+		this.state.subscribe( (value) => { 
 			console.log(value); 
 		});
 
@@ -155,9 +153,10 @@ class MyMC extends DC{
 	constructor( target ){
 		super( target );
 
-		this.form = { textinput: 'Hello world!' };
-
-		this.target.innerHTML = '<input name="textinput" />'; 
+		this.target.innerHTML = /*HTML*/ `
+		<form>
+			<input name="textinput" value="Hallo Welt!"/>
+		</form>`; 
 		
 		// link the form property to the DOM input fields
 		formValues( this, 'form', this.target );
@@ -181,16 +180,13 @@ class MyMC extends DC{
 	constructor( target ){
 		super( target );
 
-		// attach event handlers programatically
-		const onClickHandler = this.on( 'click', () => {
-			// ...
-		});
-
-		this.one( 'click', () => {
+		// attach event handler programatically
+		let onHoverHandler = this.on( 'hover', () => {
 			// ...
 		});
 
-		this.off( 'click', onClickHandler );
+		// remove event handler
+		this.off( 'hover', onHoverHandler );
 	}
 
 	// this event handler is attached automatically

package/dist/MC.d.ts

@@ -1,16 +1,8 @@
 import { LooseObject } from './helpers.js';
+import { BubbleController } from './events.js';
 export interface HTMLMcElement extends HTMLElement {
     _mc: LooseObject;
 }
-declare function off(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): void;
-declare function on(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once?: boolean): EventListenerOrEventListenerObject;
-declare function one(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): EventListenerOrEventListenerObject;
-declare class BubbleController {
-    stopped: boolean;
-    constructor();
-    stop(): void;
-}
-declare function trigger(domNode: HTMLElement, event: string, data?: any, bubble?: string, controller?: BubbleController): void;
 declare class McBase {
     private _target;
     constructor(target?: {
@@ -35,5 +27,5 @@ declare class DC extends McBase {
     descendants(): DC[] | null;
 }
 declare function autoload(enable?: boolean): boolean;
-export { McBase, MC, DC, autoload, on, one, off, trigger };
+export { MC, DC, McBase, autoload };
 //# sourceMappingURL=MC.d.ts.map

package/dist/MC.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AAkED,iBAAS,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAEzF;AAED,iBAAS,EAAE,CACV,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,EAC3C,IAAI,GAAE,OAAe,GACnB,kCAAkC,CAGpC;AAED,iBAAS,GAAG,CACX,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC,CAGpC;AAED,cAAM,gBAAgB;IACrB,OAAO,UAAS;;IAEhB,IAAI;CAGJ;AAGD,iBAAS,OAAO,CACf,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,MAAM,EACb,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,EACpB,UAAU,CAAC,EAAE,gBAAgB,QA8C7B;AAiDD,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;IAY3C,IAAI,MAAM,IAAI,GAAG,CAEhB;CACD;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;CAGxB;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW;IAK/B,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,GAAQ,GAAG,aAAa;IAK9E,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM;IAK9C,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,EAAE,CACD,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC;IAIrC,GAAG,CACF,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC;IAIrC,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY,EAAE,UAAU,CAAC,EAAE,gBAAgB;IAO9F,SAAS,IAAI,EAAE,EAAE,GAAG,IAAI;IAexB,OAAO,IAAI,EAAE,GAAG,IAAI;IAMpB,QAAQ,IAAI,EAAE,EAAE,GAAG,IAAI;IAMvB,WAAW,IAAI,EAAE,EAAE,GAAG,IAAI;CAQ1B;AA8HD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAkBjD;AAID,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,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,EAAyB,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAsBtE,MAAM,WAAW,aAAc,SAAQ,WAAW;IAajD,GAAG,EAAE,WAAW,CAAC;CACjB;AA+JD,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAUlB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;IAmB3C,IAAI,MAAM,IAAI,GAAG,CAEhB;CACD;AAQD,cAAM,EAAG,SAAQ,MAAM;gBAMV,MAAM,CAAC,EAAE,GAAG;CAGxB;AASD,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW;IAgB/B,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,GAAQ,GAAG,aAAa;IAc9E,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM;IAK9C,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAalE,EAAE,CACD,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC;IAarC,GAAG,CACF,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC;IAcrC,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY,EAAE,UAAU,CAAC,EAAE,gBAAgB;IAc9F,SAAS,IAAI,EAAE,EAAE,GAAG,IAAI;IAsBxB,OAAO,IAAI,EAAE,GAAG,IAAI;IAcpB,QAAQ,IAAI,EAAE,EAAE,GAAG,IAAI;IAcvB,WAAW,IAAI,EAAE,EAAE,GAAG,IAAI;CAQ1B;AAwKD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAuBjD;AAUD,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC"}

package/dist/MC.js

@@ -1,4 +1,5 @@
 'use strict';
+import { trigger, on, one, off } from './events.js';
 const isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
 function isDOM(element) {
     return element && element instanceof HTMLElement;
@@ -36,60 +37,6 @@ function init(element) {
         element.trigger('Init');
     }, 0);
 }
-function getMcEventName(eventName) {
-    return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
-}
-function off(domNode, eventName, handler) {
-    domNode.removeEventListener(getMcEventName(eventName), handler);
-}
-function on(domNode, eventName, handler, once = false) {
-    domNode.addEventListener(getMcEventName(eventName), handler, { capture: false, once });
-    return handler;
-}
-function one(domNode, eventName, handler) {
-    on(domNode, eventName, handler, true);
-    return handler;
-}
-class BubbleController {
-    stopped = false;
-    constructor() { }
-    stop() {
-        this.stopped = true;
-    }
-}
-function trigger(domNode, event, data = {}, bubble = 'l', controller) {
-    const eventName = /^_mc/.test(event) ? event : getMcEventName(event), bubbleController = controller ? controller : new BubbleController(), ev = new CustomEvent(eventName, {
-        detail: { data, control: bubbleController },
-        bubbles: false,
-    });
-    if (bubbleController.stopped)
-        return;
-    if (/l/.test(bubble)) {
-        domNode.dispatchEvent(ev);
-        ev.stopImmediatePropagation();
-        if (bubbleController.stopped)
-            return;
-    }
-    if (/[ud]/.test(bubble)) {
-        if (bubble.indexOf('l') === -1) {
-            bubble += 'l';
-        }
-        setTimeout(() => {
-            if (bubble.indexOf('u') > -1) {
-                let parentMc = domNode.parentElement?.closest('[data-mc]');
-                if (parentMc) {
-                    parentMc?._mc.trigger(eventName, data, bubble, bubbleController);
-                }
-            }
-            if (bubble.indexOf('d') > -1) {
-                let childNodes = domNode._mc.children();
-                if (childNodes) {
-                    childNodes.forEach((_mc) => _mc.trigger(eventName, data, bubble));
-                }
-            }
-        }, 0);
-    }
-}
 function autoAttachListeners(element) {
     if (!isBrowser() || element.constructor === DC)
         return;
@@ -278,22 +225,25 @@ function loadUndefinedMCs() {
         });
     });
 }
-let autoloadEnabled = false;
 let observer = null;
 function autoload(enable = true) {
     if (!enable) {
-        observer?.disconnect();
-        observer = null;
-        return autoloadEnabled;
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
+        return false;
     }
-    autoloadEnabled = enable;
+    const wasEnabled = !!observer;
+    if (wasEnabled)
+        return true;
     observer = new MutationObserver(loadUndefinedMCs);
     setTimeout(() => {
         observer.observe(document.body, { childList: true, subtree: true });
         loadUndefinedMCs();
     }, 5);
     window.autoload = window.autoload || autoload;
-    return autoloadEnabled;
+    return true;
 }
 autoload.state = loadingDCs;
-export { McBase, MC, DC, autoload, on, one, off, trigger };
+export { MC, DC, McBase, autoload };

package/dist/MC.min.js

@@ -21,54 +21,17 @@
 /******/ 
 /************************************************************************/
 var __webpack_exports__ = {};
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   AU: () => (/* binding */ off),
-/* harmony export */   DC: () => (/* binding */ DC),
-/* harmony export */   E_: () => (/* binding */ autoload),
-/* harmony export */   MC: () => (/* binding */ MC),
-/* harmony export */   Oc: () => (/* binding */ McBase),
-/* harmony export */   hZ: () => (/* binding */ trigger),
-/* harmony export */   on: () => (/* binding */ on),
-/* harmony export */   xH: () => (/* binding */ one)
-/* harmony export */ });
 
-const isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
-function isDOM(element) {
-    return element && element instanceof HTMLElement;
-}
-function add(target, key, element = {}) {
-    let node = target;
-    if (!node._mc) {
-        node._mc = new DC(target);
-    }
-    const _mc = node._mc;
-    if (key.length && !_mc[key]) {
-        _mc[key] = element;
-        if (target instanceof HTMLElement && !target.getAttribute('data-mc')) {
-            target.setAttribute('data-mc', '');
-        }
-    }
-    return node;
-}
-function remove(target, key) {
-    if (!key)
-        return;
-    const _mc = target?._mc || {};
-    if (_mc && _mc[key]) {
-        delete _mc[key];
-    }
-    if (!Object.keys(_mc).length && target instanceof HTMLElement && target.hasAttribute('data-mc')) {
-        target.removeAttribute('data-mc');
-    }
-    return;
-}
-function init(element) {
-    setTimeout(() => {
-        if (element.constructor === DC)
-            return;
-        element.trigger('Init');
-    }, 0);
-}
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  DC: () => (/* binding */ DC),
+  MC: () => (/* binding */ MC),
+  O: () => (/* binding */ McBase),
+  E: () => (/* binding */ autoload)
+});
+
+;// ./build/events.js
+
 function getMcEventName(eventName) {
     return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
 }
@@ -123,6 +86,47 @@ function trigger(domNode, event, data = {}, bubble = 'l', controller) {
         }, 0);
     }
 }
+
+;// ./build/MC.js
+
+
+const isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
+function isDOM(element) {
+    return element && element instanceof HTMLElement;
+}
+function add(target, key, element = {}) {
+    let node = target;
+    if (!node._mc) {
+        node._mc = new DC(target);
+    }
+    const _mc = node._mc;
+    if (key.length && !_mc[key]) {
+        _mc[key] = element;
+        if (target instanceof HTMLElement && !target.getAttribute('data-mc')) {
+            target.setAttribute('data-mc', '');
+        }
+    }
+    return node;
+}
+function remove(target, key) {
+    if (!key)
+        return;
+    const _mc = target?._mc || {};
+    if (_mc && _mc[key]) {
+        delete _mc[key];
+    }
+    if (!Object.keys(_mc).length && target instanceof HTMLElement && target.hasAttribute('data-mc')) {
+        target.removeAttribute('data-mc');
+    }
+    return;
+}
+function init(element) {
+    setTimeout(() => {
+        if (element.constructor === DC)
+            return;
+        element.trigger('Init');
+    }, 0);
+}
 function autoAttachListeners(element) {
     if (!isBrowser() || element.constructor === DC)
         return;
@@ -311,32 +315,31 @@ function loadUndefinedMCs() {
         });
     });
 }
-let autoloadEnabled = false;
 let observer = null;
 function autoload(enable = true) {
     if (!enable) {
-        observer?.disconnect();
-        observer = null;
-        return autoloadEnabled;
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
+        return false;
     }
-    autoloadEnabled = enable;
+    const wasEnabled = !!observer;
+    if (wasEnabled)
+        return true;
     observer = new MutationObserver(loadUndefinedMCs);
     setTimeout(() => {
         observer.observe(document.body, { childList: true, subtree: true });
         loadUndefinedMCs();
     }, 5);
     window.autoload = window.autoload || autoload;
-    return autoloadEnabled;
+    return true;
 }
 autoload.state = loadingDCs;
 
 
 var __webpack_exports__DC = __webpack_exports__.DC;
 var __webpack_exports__MC = __webpack_exports__.MC;
-var __webpack_exports__McBase = __webpack_exports__.Oc;
-var __webpack_exports__autoload = __webpack_exports__.E_;
-var __webpack_exports__off = __webpack_exports__.AU;
-var __webpack_exports__on = __webpack_exports__.on;
-var __webpack_exports__one = __webpack_exports__.xH;
-var __webpack_exports__trigger = __webpack_exports__.hZ;
-export { __webpack_exports__DC as DC, __webpack_exports__MC as MC, __webpack_exports__McBase as McBase, __webpack_exports__autoload as autoload, __webpack_exports__off as off, __webpack_exports__on as on, __webpack_exports__one as one, __webpack_exports__trigger as trigger };
+var __webpack_exports__McBase = __webpack_exports__.O;
+var __webpack_exports__autoload = __webpack_exports__.E;
+export { __webpack_exports__DC as DC, __webpack_exports__MC as MC, __webpack_exports__McBase as McBase, __webpack_exports__autoload as autoload };