@twobirds/microcomponents 0.0.80 → 0.0.81

package/dist/MC.js

@@ -0,0 +1,379 @@
+'use strict';
+import { McEvent } from './McEvent.js';
+var isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
+let nativeEventNames = new Set();
+if (isBrowser()) {
+    Object.keys(HTMLElement.prototype)
+        .filter((key) => /^on/.test(key))
+        .forEach((eventName) => nativeEventNames.add(eventName));
+}
+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 addListener(domNode, eventName, handler, capture = false, once = false) {
+    let options = { once: false };
+    if (capture) {
+        options.capture = capture;
+    }
+    if (once) {
+        options.once = once;
+    }
+    domNode.addEventListener(eventName, handler, options);
+}
+function removeListener(domNode, eventName, handler) {
+    domNode.removeEventListener(eventName, handler);
+}
+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('_mc')) {
+            target.setAttribute('_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('_mc')) {
+        target.removeAttribute('_mc');
+    }
+    return;
+}
+function trigger(target, ev, data = {}, bubble = 'l') {
+    let _mc = target?._mc;
+    if (!_mc)
+        return;
+    let event = ev instanceof McEvent
+        ? new McEvent(ev.type, ev.data, 'l')
+        : new McEvent(ev, data, 'l'), mcEvent = typeof ev !== 'string' ? ev : new McEvent(ev, data, bubble);
+    [...Object.values(_mc)].forEach((mc) => {
+        if (mc?.trigger && typeof mc?.trigger === 'function') {
+            mc?.trigger(event);
+        }
+    });
+    if (/[ud]/.test(mcEvent.bubble)) {
+        bubbleEvent(target, mcEvent);
+    }
+    return;
+}
+function init(element) {
+    if (element.constructor === DC)
+        return;
+    setTimeout(() => {
+        element.trigger('Init');
+    }, 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(), listener = (ev) => {
+                that.trigger(withoutOnOne, ev);
+            };
+            if (once) {
+                Object.defineProperty(element, 'on' + withoutOnOne, {
+                    configurable: true,
+                    enumerable: false,
+                    writable: true,
+                    value: (ev) => {
+                        that.constructor.prototype[key].bind(that)(ev);
+                    },
+                });
+            }
+            if (nativeEventNames.has('on' + nativeEventName)) {
+                addListener(target, nativeEventName, listener, false, once);
+            }
+        });
+    }
+}
+function bubbleEvent(target, ev) {
+    if (/[ud]/.test(ev.bubble)) {
+        setTimeout(() => {
+            if (ev.bubble.indexOf('l') === -1) {
+                ev.bubble += 'l';
+            }
+            if (ev.bubble.indexOf('u') > -1) {
+                let parent = traverseNodes(target, '', true)?.[0].target;
+                if (parent)
+                    DC.trigger(parent, ev);
+            }
+            if (ev.bubble.indexOf('d') > -1) {
+                let targets = new Set(target._mc
+                    .children()
+                    .map((c) => c?.target));
+                targets.forEach((target) => {
+                    if (target)
+                        DC.trigger(target, ev);
+                });
+            }
+        }, 0);
+    }
+}
+class McBase {
+    #target;
+    constructor(target, debug = false) {
+        let that = this, element = that;
+        this.#target = new WeakRef(target || {});
+        init(element);
+        autoAttachListeners(element);
+    }
+    get target() {
+        return this.#target.deref();
+    }
+}
+class MC extends McBase {
+    _mc = {};
+    constructor(target) {
+        super(target);
+    }
+    static trigger = trigger;
+    trigger(ev, data = {}, bubble = 'l') {
+        let that = this;
+        if (that.constructor === MC || that.constructor === DC) {
+            let event = ev instanceof McEvent
+                ? new McEvent(ev.type, ev.data, 'l')
+                : new McEvent(ev, data, 'l'), mcEvent = typeof ev !== 'string'
+                ? ev
+                : new McEvent(ev, data, bubble);
+            [...Object.getOwnPropertyNames(that)].forEach((mc) => {
+                if (that[mc]?.trigger &&
+                    typeof that[mc]?.trigger === 'function') {
+                    that[mc]?.trigger(event);
+                }
+            });
+            if (/[ud]/.test(mcEvent.bubble)) {
+                bubbleEvent(that.target, mcEvent);
+            }
+            return;
+        }
+        if (that instanceof MC || that instanceof DC) {
+            const that = this, mcEvent = typeof ev !== 'string'
+                ? ev
+                : new McEvent(ev, data, bubble), handlerName = 'on' + mcEvent.type[0].toUpperCase() + mcEvent.type.slice(1);
+            if (mcEvent.bubble.indexOf('l') > -1) {
+                if (!mcEvent.immediateStopped &&
+                    typeof that[handlerName] === 'function') {
+                    that[handlerName](mcEvent);
+                    if (that.hasOwnProperty(handlerName)) {
+                        delete that[handlerName];
+                    }
+                }
+            }
+            if (mcEvent.stopped || mcEvent.bubble === 'l') {
+                return that;
+            }
+            if (/[ud]/.test(mcEvent.bubble)) {
+                bubbleEvent(that.target, mcEvent);
+            }
+        }
+    }
+}
+class DC extends McBase {
+    _mc = {};
+    constructor(target, debug = false) {
+        super(target);
+    }
+    static add = add;
+    static remove = remove;
+    static trigger = trigger;
+    trigger(ev, data = {}, bubble) {
+        MC.prototype.trigger.call(this, ev, data, bubble);
+    }
+    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 id = Math.random().toString().replace('.', '');
+        const selector = '[_mc]:not([temp_id="' + id + '"] [_mc] [_mc])';
+        target.setAttribute('temp_id', id);
+        const myDomElements = target.querySelectorAll(selector);
+        const mcValues = getMicroComponents([...myDomElements], search);
+        target.removeAttribute('temp_id');
+        return mcValues;
+    }
+    descendants(search = '') {
+        let target = this?.target;
+        if (!isDOM(target))
+            return [];
+        const myDomElements = target.querySelectorAll('*[_mc]');
+        return getMicroComponents([...myDomElements], search);
+    }
+}
+const CEs = new Map();
+const MCs = new Map();
+function makeLoadScript(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('name', element);
+    se.setAttribute('loading', '');
+    addListener(se, 'load', (ev) => {
+        se.removeAttribute('loading');
+        se.setAttribute('loaded', '');
+    });
+    addListener(se, 'error', (ev) => {
+        console.error('could not load Custom Element code from', fileName);
+    });
+    return se;
+}
+function onLoadCallback(script) {
+    setTimeout(function () {
+        const importFileName = script.getAttribute('src');
+        const elementName = script.getAttribute('name');
+        const se = document.createElement('script');
+        se.async = true;
+        se.setAttribute('type', 'module');
+        const code = `
+
+			import _ from "${importFileName}";
+			import { DC } from "./microcomponents.js";
+
+			const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
+
+			elements.forEach((element) => {
+				// add class to MCs repository
+				autoload.state.MCs.set( '${elementName}', _ );
+				// add instance to HTMLElement 
+				DC.add(element, _.name, new _(element));
+				// remove instance name from elements "_mc" attribute
+				element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim()); 
+			});
+
+			setTimeout( () => {
+				document.body.querySelector('script[name="${elementName}]"')?.remove();
+			},0);
+
+		`;
+        se.innerHTML = code;
+        document.body.append(se);
+    }, 0);
+}
+function loadUndefinedMicroComponents() {
+    [...document.querySelectorAll(':not(:defined)')]
+        .filter((element) => !!element
+        && !customElements.get(element.tagName.toLowerCase())
+        && !CEs.has(element.tagName.toLowerCase()))
+        .forEach((el) => {
+        const elementName = el.tagName.toLowerCase(), fileName = './' + elementName.split('-').join('/') + '.js';
+        const se = makeLoadScript(elementName);
+        addListener(se, 'load', () => {
+            CEs.set(elementName, customElements.get(el.tagName.toLowerCase()));
+        });
+        CEs.set(elementName, 'loading');
+        document.head.append(se);
+    });
+    [...document.querySelectorAll('[_mc]:not([_mc=""]')]
+        .filter((element) => !!element)
+        .forEach((el) => {
+        const elements = el.getAttribute('_mc')?.split(' ').filter(m => !!m) || [];
+        const elementsToBeLoaded = elements.filter(m => !MCs.has(m));
+        elementsToBeLoaded?.forEach(elementName => {
+            const se = makeLoadScript(elementName);
+            addListener(se, 'load', () => onLoadCallback(document.head.querySelector(`script[name="${elementName}"]`)));
+            MCs.set(elementName, 'loading');
+            document.head.append(se);
+        });
+        const elementsAlreadyLoaded = elements.filter(m => MCs.has(m) && !MCs.get(m).length);
+        elementsAlreadyLoaded?.forEach(elementName => {
+            setTimeout(() => {
+                DC.add(el, elementName, new (autoload.state.MCs.get(elementName))(el));
+                const newAttribute = el.getAttribute('_mc')
+                    .replace('${elementName}', '')
+                    .replace(/\w\w/g, ' ')
+                    .trim() || '_mc';
+                el.setAttribute('_mc');
+            }, 5);
+        });
+    });
+}
+let autoloadEnabled = false;
+let observer = null;
+function autoload(enable = true) {
+    if (!enable) {
+        observer?.disconnect();
+        observer = null;
+        return autoloadEnabled;
+    }
+    autoloadEnabled = enable;
+    observer = new MutationObserver(loadUndefinedMicroComponents);
+    setTimeout(() => {
+        observer.observe(document.body, { childList: true, subtree: true });
+        loadUndefinedMicroComponents();
+    }, 5);
+    window.autoload = window.autoload || autoload;
+    return autoloadEnabled;
+}
+autoload.state = { CEs, MCs };
+export { addListener, removeListener, McBase, MC, DC, McEvent, autoload };
+//# sourceMappingURL=MC.js.map

package/dist/McEvent.js

@@ -0,0 +1,71 @@
+"use strict";
+var isBrowser = new Function("try {return this===window;}catch(e){ return false;}");
+let nativeEventNames = new Set();
+if (isBrowser()) {
+    Object.keys(HTMLElement.prototype).filter(key => /^on/.test(key)).forEach(eventName => nativeEventNames.add(eventName));
+}
+function isDOM(element) {
+    return element && element instanceof HTMLElement;
+}
+class McEvent {
+    #type;
+    #stopped = false;
+    #immediateStopped = false;
+    constructor(type, data = {}, bubble = 'l') {
+        this.#type = type;
+        this.data = data;
+        this.bubble = bubble;
+    }
+    get type() {
+        return this.#type;
+    }
+    get stopped() {
+        return this.#stopped;
+    }
+    get immediateStopped() {
+        return this.#immediateStopped;
+    }
+    stopPropagation() {
+        this.#stopped = true;
+    }
+    stopImmediatePropagation() {
+        this.stopPropagation();
+        this.#immediateStopped = true;
+    }
+}
+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;
+}
+export { McEvent };
+//# sourceMappingURL=McEvent.js.map

package/dist/elements.js

@@ -0,0 +1,48 @@
+'use strict';
+import { DC } from './MC.js';
+import { kebabToPascal } from './helpers.js';
+class CeBaseClass extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        DC.trigger(this, 'Connected');
+    }
+    disconnectedCallback() {
+        DC.trigger(this, 'Disconnected');
+    }
+    adoptedCallback() {
+        DC.trigger(this, 'Adopted');
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        DC.trigger(this, 'AttributeChanged', { name, oldValue, newValue });
+    }
+}
+function createNamedClass(name, ClassBody) {
+    return Object.defineProperty(ClassBody, 'name', { value: name });
+}
+export function defineCE(tagName, DefinitionClass, observedAttributes = []) {
+    if (customElements.get(tagName)) {
+        console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
+        return;
+    }
+    if (!tagName.includes('-')) {
+        throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');
+    }
+    let name = kebabToPascal(tagName);
+    customElements.define(tagName, createNamedClass(name, class extends CeBaseClass {
+        instance;
+        constructor(data) {
+            super();
+            let instance = new DefinitionClass(this, data);
+            DC.add(this, name, instance);
+        }
+        static get observedAttributes() {
+            return observedAttributes;
+        }
+    }));
+}
+export function getCE(tagName) {
+    return customElements.get(tagName);
+}
+//# sourceMappingURL=elements.js.map

package/dist/formValues.js

@@ -0,0 +1,162 @@
+'use strict';
+import { copyGettersSetters } from './helpers.js';
+import { DC, addListener } from './MC.js';
+import { observe } from './observables.js';
+const getInputName = (e) => {
+    return e.tagName.toLowerCase();
+};
+class InputBase {
+    constructor(e) { }
+}
+class RadioHandler extends InputBase {
+    #e;
+    constructor(e) {
+        super(e);
+        this.#e = e;
+    }
+    get val() {
+        let ret = new FormData(this.#e.form).get(this.#e.name);
+        return ret;
+    }
+    set val(value) {
+        let arr = [
+            ...this.#e.form.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`),
+        ];
+        arr
+            .filter((e) => e.getAttribute('value') === value)
+            .shift().checked = true;
+    }
+}
+class CheckboxHandler extends InputBase {
+    #e;
+    constructor(e) {
+        super(e);
+        this.#e = e;
+    }
+    get val() {
+        return this.#e.checked;
+    }
+    set val(value) {
+        this.#e.checked = value;
+    }
+}
+class InputHandler extends InputBase {
+    #e;
+    constructor(e) {
+        super(e);
+        this.#e = e;
+    }
+    get val() {
+        return this.#e.value;
+    }
+    set val(value) {
+        this.#e.value = value;
+    }
+}
+class SelectHandler extends InputBase {
+    #e;
+    #multi = false;
+    constructor(e) {
+        super(e);
+        this.#e = e;
+        this.#multi = e.multiple;
+    }
+    get val() {
+        const that = this, ret = [];
+        [...that.#e.querySelectorAll('option')]
+            .filter((o) => o.selected)
+            .forEach((o) => {
+            ret.push(o.value);
+        });
+        if (this.#multi)
+            return ret;
+        return ret.length ? ret[0] : '';
+    }
+    set val(value) {
+        const that = this;
+        value = typeof value === 'string' ? [value] : value;
+        [...that.#e.querySelectorAll('option')].forEach((o) => {
+            if (value.indexOf(o.value) > -1) {
+                o.selected = true;
+            }
+            else {
+                o.selected = false;
+            }
+        });
+    }
+}
+class TextAreaHandler extends InputBase {
+    #e;
+    constructor(e) {
+        super(e);
+        this.#e = e;
+    }
+    get val() {
+        return this.#e.value || '';
+    }
+    set val(value) {
+        this.#e.value = value;
+    }
+}
+const getInputHandlers = (e) => {
+    let inputList = [
+        ...(e || document).querySelectorAll('input,select,textarea'),
+    ], handlers = {};
+    inputList.forEach((i) => {
+        const name = i.getAttribute('name');
+        if (name) {
+            let handler = false;
+            switch (getInputName(i)) {
+                case 'input':
+                    switch (i.type) {
+                        case 'radio':
+                            handler = new RadioHandler(i);
+                            break;
+                        case 'checkbox':
+                            handler = new CheckboxHandler(i);
+                            break;
+                        default:
+                            handler = new InputHandler(i);
+                    }
+                    break;
+                case 'select':
+                    handler = new SelectHandler(i);
+                    break;
+                case 'textarea':
+                    handler = new TextAreaHandler(i);
+                    break;
+                default:
+                    console.warn('handler missing:', name, 'for', i.tagName.toLowerCase(), i);
+                    break;
+            }
+            if (handler) {
+                DC.add(i, name, handler);
+                Object.defineProperty(handlers, name, {
+                    enumerable: true,
+                    configurable: true,
+                    get: () => {
+                        return handler.val;
+                    },
+                    set: (value) => {
+                        if (handler.val !== value) {
+                            handler.val = value;
+                        }
+                    },
+                });
+            }
+        }
+    });
+    return handlers;
+};
+export function formValues(targetObject, propertyName, dom) {
+    let handlers = getInputHandlers(dom);
+    targetObject[propertyName] = Object.assign({}, handlers);
+    observe(targetObject, propertyName);
+    copyGettersSetters(handlers, targetObject[propertyName]);
+    [...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
+        addListener(input, 'input', (ev) => {
+            targetObject[propertyName].notify();
+        });
+    });
+}
+//# sourceMappingURL=formValues.js.map