@twobirds/microcomponents 0.1.20 → 0.1.23

package/dist/MC.min.js

@@ -1,342 +1 @@
-/******/ // 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))
-/******/ })();
-/******/ 
-/************************************************************************/
-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);
-}
-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;
-    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();
-            if ('on' + nativeEventName in target) {
-                let listener = (ev) => {
-                    that[key](ev);
-                };
-                target.addEventListener(nativeEventName, listener);
-            }
-            else {
-                let listener = (ev) => {
-                    that[key](ev);
-                };
-                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 mcArray = [...domNode.querySelectorAll(selector)]
-        .filter((e) => !!e._mc)
-        .map((e) => e._mc);
-    domNode.removeAttribute('temp_id');
-    return mcArray.length ? mcArray : null;
-}
-class McBase {
-    _target;
-    constructor(target) {
-        let element = this;
-        this._target = new WeakRef(target || {});
-        autoAttachListeners(element);
-        init(element);
-    }
-    get target() {
-        return this._target.deref();
-    }
-}
-class MC extends McBase {
-    constructor(target) {
-        super(target);
-    }
-}
-class DC extends McBase {
-    constructor(target) {
-        super(target);
-    }
-    static add(target, key, element = {}) {
-        return add(target, key, element);
-    }
-    static remove(target, key) {
-        remove(target, key);
-    }
-    off(eventName, handler) {
-        off(this.target, eventName, handler);
-    }
-    on(eventName, handler) {
-        return on(this.target, eventName, handler);
-    }
-    one(eventName, handler) {
-        return one(this.target, eventName, handler);
-    }
-    trigger(eventName, data = {}, bubble = 'l', controller) {
-        trigger(this.target, eventName, data, bubble, controller);
-    }
-    ancestors() {
-        let currentNode = this?.target, result = [];
-        if (!isDOM(currentNode))
-            return [];
-        while ((currentNode = currentNode.closest('[data-mc]'))) {
-            if (currentNode?._mc) {
-                result.push(currentNode?._mc);
-            }
-        }
-        return result.length ? result : null;
-    }
-    closest() {
-        let target = this.target;
-        if (!isDOM(target))
-            return null;
-        return target.closest('[data-mc]')?._mc || null;
-    }
-    children() {
-        let target = this?.target;
-        if (!isDOM(target))
-            return null;
-        return getMcChildNodes(target);
-    }
-    descendants() {
-        const target = this?.target;
-        if (!isDOM(target))
-            return [];
-        const mcArray = [...target.querySelectorAll('[data-mc]')]
-            .filter((e) => !!e._mc)
-            .map((e) => e._mc);
-        return mcArray.length ? mcArray : null;
-    }
-}
-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) => {
-            try {
-                DC.add(node, Klass.name, new Klass(node));
-            }
-            catch (error) {
-                if (Klass['create']) {
-                    let element = Klass.create(node);
-                    element.setAttribute('data-mc', node.getAttribute('data-mc'));
-                    node.replaceWith(element);
-                    node = element;
-                }
-                else {
-                    throw `Class ${Klass.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`;
-                }
-            }
-            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;
-
-
-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 };
+function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function s(e,t,n={}){let r=e;`_mc`in e||(r._mc=new h(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function c(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function l(e){queueMicrotask(()=>{e.trigger(`Init`)})}function u(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function d(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function f(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var p=class{_target;constructor(e){this._target=new WeakRef(e||{}),this instanceof h&&(u(this),l(this))}get target(){return this._target.deref()}},m=class extends p{constructor(e){super(e)}},h=class extends p{constructor(e){super(e)}static add(e,t,n={}){return s(e,t,n)}static remove(e,t){c(e,t)}static get(e,t,n){if(!o(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=f(this.target,e);for(;n;)t.push(n),n=f(n.target,e);return t}closest(e){return f(this.target,e)}children(e){let t=d(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};export{h as DC,m as MC,p as McBase,o as isMcDOM};

package/dist/autoload.min.js

@@ -0,0 +1 @@
+function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function s(e,t,n={}){let r=e;`_mc`in e||(r._mc=new m(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function c(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function l(e){queueMicrotask(()=>{e.trigger(`Init`)})}function u(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function d(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function f(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var p=class{_target;constructor(e){this._target=new WeakRef(e||{}),this instanceof m&&(u(this),l(this))}get target(){return this._target.deref()}},m=class extends p{constructor(e){super(e)}static add(e,t,n={}){return s(e,t,n)}static remove(e,t){c(e,t)}static get(e,t,n){if(!o(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=f(this.target,e);for(;n;)t.push(n),n=f(n.target,e);return t}closest(e){return f(this.target,e)}children(e){let t=d(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}},h=new Set;function g(e){return()=>{let t=Array.from(document.querySelectorAll(`[data-mc*="${e}"]`)).filter(e=>e instanceof HTMLElement);if(t.length===0)return;let n=customElements.get(e);for(let r of t){try{m.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!o(e))throw`create() of Class ${n.name} did not return a McHost.`;e.setAttribute(`data-mc`,r.getAttribute(`data-mc`)??``),r.replaceWith(e),r=e}else throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`}let t=r.getAttribute(`data-mc`).split(` `).filter(t=>t!==e&&t!==``).join(` `).trim();r.setAttribute(`data-mc`,t)}}}function _(e){if(h.has(e))return;h.add(e);let t=`./`+e.split(`-`).join(`/`)+`.js`,n=document.createElement(`script`);n.setAttribute(`src`,t),n.setAttribute(`blocking`,`render`),n.async=!0,n.setAttribute(`type`,`module`),n.setAttribute(`data-name`,e),n.setAttribute(`loading`,``),customElements.whenDefined(e).then(g(e)),n.addEventListener(`load`,t=>{h.delete(e),document.head.querySelector(`script[data-name="${e}"]`)?.remove()}),n.addEventListener(`error`,e=>{console.error(`could not load DC code from`,t)}),document.head.append(n)}function v(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!h.has(e.tagName.toLowerCase())).forEach(e=>{_(e.tagName.toLowerCase())}),[...document.querySelectorAll(`[data-mc]:not([data-mc=""]`)].filter(e=>!!e).forEach(e=>{(e.getAttribute(`data-mc`)?.split(` `).filter(e=>e!==``))?.forEach(e=>{let t=customElements.get(e);!h.has(e)&&!t?_(e):t&&g(e)()})})}var y=null,b=function(e=!0){return e?y?!0:(y=new MutationObserver(v),setTimeout(()=>{y.observe(document.body,{childList:!0,subtree:!0}),v()},5),window.autoload??=b,!0):(y&&=(y.disconnect(),null),!1)};b.state=h;export{b as autoload};