@twobirds/microcomponents 0.1.16 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@twobirds/microcomponents",
-	"version": "0.1.16",
+	"version": "0.1.19",
 	"description": "Micro Components Organization Class",
 	"main": "./dist/microcomponents.ts",
 	"types": "./dist/microcomponents.d.ts",
@@ -22,8 +22,8 @@
 		"clean": "rm -rf build/*; rm -rf dist/*; rm -rf public/*;",
 		"prep": "cp -R src/* build || true;  mkdir public || true; npm run typedoc; npm run format; npm run lint;",
 		"copyToDist": "cp build/*.js dist; cp public/microcomponents.min.js public/test; cp -R build/*.ts* dist; cp *.svg dist;",
-		"copyToPublic1": "cp -R assets/* public || true; cp dist/*.* public; cp dist/*.* public/test; mkdir public/src || true; cp -R build/* public/src || true; cp -R build/* public || true;",
-		"copyToPublic2": "cp -R build/test/* public/test; cp dist/MicroComponents.svg public; cp public/MicroComponents.svg public/test;",
+		"copyToPublic1": "cp dist/*.* public; cp dist/*.* public/test;",
+		"copyToPublic2": "cp -R assets/* public || true; cp -R build/src/* public/; cp dist/MicroComponents.svg public; cp public/MicroComponents.svg public/test;",
 		"build": "npm run clean; npm run prep; tsc; npm run webpack; npm run copyToDist; npm run copyToPublic1; npm run copyToPublic2;",
 		"dev": "cd public; php -S 0.0.0.0:10000; cd ..",
 		"doc": "cd public/typedoc; php -S 0.0.0.0:11000; cd ../..",
@@ -42,6 +42,7 @@
 		"ts-loader": "^9.5.2",
 		"typedoc": "^0.26.11",
 		"typescript": "^5.5.4",
+		"vite": "^7.3.1",
 		"webpack": "^5.97.1",
 		"webpack-cli": "^6.0.1"
 	},

package/dist/MC.d.ts

@@ -1,39 +0,0 @@
-import { LooseObject } from './helpers.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?: {
-        [key: string]: any;
-    });
-    get target(): any;
-}
-declare class MC extends McBase {
-    constructor(target?: any);
-}
-declare class DC extends McBase {
-    constructor(target: HTMLElement);
-    static add(target: HTMLElement, key: string, element?: any): HTMLMcElement;
-    static remove(target: HTMLElement, key: string): void;
-    off(eventName: string, handler: EventListenerOrEventListenerObject): void;
-    on(eventName: string, handler: EventListenerOrEventListenerObject): EventListenerOrEventListenerObject;
-    one(eventName: string, handler: EventListenerOrEventListenerObject): EventListenerOrEventListenerObject;
-    trigger(eventName: string, data?: any, bubble?: string, controller?: BubbleController): void;
-    ancestors(): DC[] | null;
-    closest(): DC | null;
-    children(): DC[] | null;
-    descendants(): DC[] | null;
-}
-declare function autoload(enable?: boolean): boolean;
-export { McBase, MC, DC, autoload, on, one, off, trigger };
-//# sourceMappingURL=MC.d.ts.map

package/dist/MC.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IAC9C,GAAG,EAAE,WAAW,CAAC;CACpB;AAmED,iBAAS,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAEzF;AAED,iBAAS,EAAE,CACP,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,EAC3C,IAAI,GAAE,OAAe,GACtB,kCAAkC,CAGpC;AAED,iBAAS,GAAG,CACR,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAC5C,kCAAkC,CAGpC;AAED,cAAM,gBAAgB;IAClB,OAAO,UAAS;;IAEhB,IAAI;CAGP;AAGD,iBAAS,OAAO,CACZ,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,MAAM,EACb,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,EACpB,UAAU,CAAC,EAAE,gBAAgB,QA8ChC;AAkDD,cAAM,MAAM;IACR,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;IAU3C,IAAI,MAAM,IAAI,GAAG,CAEhB;CACJ;AAED,cAAM,EAAG,SAAQ,MAAM;gBACP,MAAM,CAAC,EAAE,GAAG;CAG3B;AAED,cAAM,EAAG,SAAQ,MAAM;gBACP,MAAM,EAAE,WAAW;IAI/B,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,GAAQ,GAAG,aAAa;IAI9E,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM;IAK9C,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,EAAE,CACE,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAC5C,kCAAkC;IAIrC,GAAG,CACC,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAC5C,kCAAkC;IAIrC,OAAO,CACH,SAAS,EAAE,MAAM,EACjB,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,EACpB,UAAU,CAAC,EAAE,gBAAgB;IAMjC,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;CAQ7B;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"}

package/dist/MC.js

@@ -1,302 +0,0 @@
-'use strict';
-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;
-export { McBase, MC, DC, autoload, on, one, off, trigger };