@twobirds/microcomponents 0.0.82 → 0.0.84

package/public/test/MC.min.js

@@ -0,0 +1,377 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["MC"] = factory();
+	else
+		root["MC"] = factory();
+})(this, () => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   DC: () => (/* binding */ DC),
+/* harmony export */   MC: () => (/* binding */ MC),
+/* harmony export */   McBase: () => (/* binding */ McBase),
+/* harmony export */   autoload: () => (/* binding */ autoload),
+/* harmony export */   off: () => (/* binding */ off),
+/* harmony export */   on: () => (/* binding */ on),
+/* harmony export */   one: () => (/* binding */ one),
+/* harmony export */   trigger: () => (/* binding */ trigger)
+/* harmony export */ });
+
+var isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
+function getNativeEventNames(domNode) {
+    let nativeEventNames = [];
+    if (isBrowser()) {
+        Object.keys(HTMLElement.prototype)
+            .filter((key) => /^on/.test(key))
+            .forEach((eventName) => nativeEventNames.push(eventName));
+    }
+    return nativeEventNames;
+}
+function getMicroComponents(elements, search) {
+    let mcValues = [];
+    elements.forEach((e) => {
+        if (e) {
+            if (e instanceof HTMLElement) {
+                const _mc = e?._mc;
+                if (!search && _mc) {
+                    mcValues = mcValues.concat(Object.values(e._mc));
+                }
+                else if (search && _mc && _mc[search]) {
+                    mcValues.push(_mc[search]);
+                }
+            }
+        }
+    });
+    return mcValues;
+}
+function 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;
+}
+function isDOM(element) {
+    return element && element instanceof HTMLElement;
+}
+function add(target, key, element = {}) {
+    let node = target;
+    if (!node._mc) {
+        let debug = DC?.debug;
+        DC.debug = false;
+        node._mc = new DC(target);
+        DC.debug = debug;
+        delete node._mc._mc;
+    }
+    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 element;
+}
+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) {
+    if (element.constructor === DC)
+        return;
+    setTimeout(() => {
+        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 });
+}
+function one(domNode, eventName, handler) {
+    on(domNode, eventName, handler, true);
+}
+function trigger(domNode, event, data = {}, bubble = 'l') {
+    const ev = typeof event === 'string'
+        ? new CustomEvent(getMcEventName(event), { detail: { data, bubble } })
+        : event;
+    if (bubble.length && bubble.indexOf('l') > -1) {
+        domNode.dispatchEvent(ev);
+    }
+    if (/[u|d]/.test(bubble)) {
+        bubbleEvent(domNode, ev);
+    }
+}
+function bubbleEvent(domNode, ev) {
+    setTimeout(() => {
+        if (ev.detail.bubble.indexOf('l') === -1) {
+            ev.detail.bubble += 'l';
+        }
+        if (ev.detail.bubble.indexOf('u') > -1) {
+            domNode.closest('[data-mc]')?.dispatchEvent(ev);
+        }
+        if (ev.detail.bubble.indexOf('d') > -1) {
+            let targets = new Set(domNode._mc
+                .children()
+                .map((c) => c?.target));
+            targets.forEach((target) => {
+                if (target)
+                    DC.trigger(target, ev);
+            });
+        }
+    }, 0);
+}
+function autoAttachListeners(element) {
+    if (!isBrowser() || element.constructor === DC)
+        return;
+    const target = element.target;
+    if (target instanceof HTMLElement) {
+        let that = element;
+        Object.getOwnPropertyNames(that.constructor.prototype)
+            .filter((key) => /^on[A-Z]|one[A-Z]/.test(key) &&
+            typeof that.constructor.prototype[key] === 'function')
+            .forEach((key) => {
+            let once = /^one/.test(key), withoutOnOne = key.replace(/^on[e]{0,1}/, ''), nativeEventName = withoutOnOne.toLowerCase();
+            let listener = (ev) => {
+                that[key](ev);
+            };
+            if (!!target['on' + nativeEventName]) {
+                target.addEventListener(nativeEventName, listener);
+            }
+            else {
+                on(target, withoutOnOne, listener, once);
+            }
+        });
+    }
+}
+function getMcChildNodes(domNode) {
+    const id = Math.random().toString().replace('.', '');
+    const selector = '[data-mc]:not([temp_id="' + id + '"] [data-mc] [data-mc])';
+    domNode.setAttribute('temp_id', id);
+    const myDomElements = domNode.querySelectorAll(selector);
+    domNode.removeAttribute('temp_id');
+    return myDomElements;
+}
+class McBase {
+    _target;
+    constructor(target, debug = false) {
+        let element = this;
+        this._target = new WeakRef(target || {});
+        init(element);
+        autoAttachListeners(element);
+    }
+    get target() {
+        return this._target.deref();
+    }
+}
+class MC extends McBase {
+    constructor(target) {
+        super(target);
+    }
+    static trigger = trigger;
+    trigger(ev, data = {}, bubble = 'l') {
+    }
+}
+class DC extends McBase {
+    constructor(target, debug = false) {
+        super(target);
+    }
+    static add = add;
+    static remove = remove;
+    static trigger = trigger;
+    off(eventName, handler) {
+        off(this.target, eventName, handler);
+    }
+    on(eventName, handler) {
+        on(this.target, eventName, handler);
+    }
+    one(eventName, handler) {
+        one(this.target, eventName, handler);
+    }
+    trigger(ev, data = {}, bubble = 'l') {
+        if (typeof ev === 'string') {
+        }
+    }
+    parent(search = '') {
+        let target = this.target;
+        if (!isDOM(target))
+            return [];
+        return traverseNodes(target.parentNode, search, true);
+    }
+    ancestors(search = '') {
+        let target = this?.target;
+        if (!isDOM(target))
+            return [];
+        return traverseNodes(this.target.parentNode, search, false);
+    }
+    children(search = '') {
+        let target = this?.target;
+        if (!isDOM(target))
+            return [];
+        const myDomElements = getMcChildNodes(target);
+        const mcValues = getMicroComponents([...myDomElements], search);
+        return mcValues;
+    }
+    descendants(search = '') {
+        let target = this?.target;
+        if (!isDOM(target))
+            return [];
+        const myDomElements = target.querySelectorAll('*[data-mc]');
+        return getMicroComponents([...myDomElements], search);
+    }
+}
+const loadingDCs = new Set();
+function attachDC(element) {
+    return () => {
+        const elements = Array
+            .from(document.querySelectorAll(`[data-mc*="${element}"]`))
+            .filter(element => element instanceof HTMLElement);
+        if (elements.length === 0)
+            return;
+        const klass = customElements.get(element);
+        elements.forEach((node) => {
+            DC.add(node, klass.name, new klass(node));
+            const new_mc = node
+                .getAttribute('data-mc')
+                .split(' ')
+                .filter((name) => name !== element && name !== '')
+                .join(' ')
+                .trim();
+            node.setAttribute('data-mc', new_mc);
+        });
+    };
+}
+;
+function makeLoadScript(element) {
+    if (loadingDCs.has(element))
+        return;
+    loadingDCs.add(element);
+    const fileName = './' + element.split('-').join('/') + '.js';
+    const se = document.createElement('script');
+    se.setAttribute('src', fileName);
+    se.setAttribute('blocking', 'render');
+    se.async = true;
+    se.setAttribute('type', 'module');
+    se.setAttribute('data-name', element);
+    se.setAttribute('loading', '');
+    const loadedPromise = customElements.whenDefined(element);
+    loadedPromise.then(attachDC(element));
+    se.addEventListener('load', (ev) => {
+        loadingDCs.delete(element);
+        document.head.querySelector(`script[data-name="${element}"]`)?.remove();
+    });
+    se.addEventListener('error', (ev) => {
+        console.error('could not load DC code from', fileName);
+    });
+    document.head.append(se);
+}
+function loadUndefinedMCs() {
+    [...document.querySelectorAll(':not(:defined)')]
+        .filter((element) => !!element
+        && !customElements.get(element.tagName.toLowerCase())
+        && !loadingDCs.has(element.tagName.toLowerCase()))
+        .forEach((el) => {
+        makeLoadScript(el.tagName.toLowerCase());
+    });
+    [...document.querySelectorAll('[data-mc]:not([data-mc=""]')]
+        .filter((element) => !!element)
+        .forEach((el) => {
+        const _mc = el.getAttribute('data-mc')?.split(' ').filter(name => name !== '');
+        _mc?.forEach(element => {
+            const isDefined = customElements.get(element);
+            if (!loadingDCs.has(element) && !isDefined) {
+                makeLoadScript(element);
+            }
+            else if (isDefined) {
+                attachDC(element)();
+            }
+        });
+    });
+}
+let autoloadEnabled = false;
+let observer = null;
+function autoload(enable = true) {
+    if (!enable) {
+        observer?.disconnect();
+        observer = null;
+        return autoloadEnabled;
+    }
+    autoloadEnabled = enable;
+    observer = new MutationObserver(loadUndefinedMCs);
+    setTimeout(() => {
+        observer.observe(document.body, { childList: true, subtree: true });
+        loadUndefinedMCs();
+    }, 5);
+    window.autoload = window.autoload || autoload;
+    return autoloadEnabled;
+}
+autoload.state = loadingDCs;
+
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});