@twobirds/microcomponents 0.1.19 → 0.1.20

package/dist/observables.js

@@ -0,0 +1,228 @@
+'use strict';
+import { debounce, deepEqual, flattenObject, copyGettersSetters } from './helpers.js';
+import { DC, trigger } from './MC.js';
+function isObservableObject(value) {
+    return value != null && typeof value === 'object';
+}
+function getPlaceholders(target) {
+    let placeholders = new Set(), regEx = /\{[^\{\}]*\}/g;
+    (target.getAttributeNames ? target.getAttributeNames() : [])
+        .filter((attr) => target.getAttribute(attr)?.match(regEx))
+        .forEach((attr) => {
+        let placeholders = new Set(target.getAttribute(attr)?.match(regEx));
+        placeholders.forEach((placeholder) => placeholders.add(placeholder.replace(/[\{\}]/g, '')));
+    });
+    [...target.childNodes]
+        .filter((childNode) => {
+        return (childNode.nodeType === 3 && (childNode.nodeValue || '').match(regEx));
+    })
+        .forEach((childNode) => {
+        (childNode.nodeValue || '').match(regEx).forEach((placeholder) => {
+            placeholders.add(placeholder.replace(/[\{\}]/g, ''));
+        });
+    });
+    return [...placeholders].map((placeholder) => placeholder.replace(/[\{\}]/g, ''));
+}
+const inputs = [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement];
+class Placeholders extends DC {
+    data = {};
+    oldDisplay = '';
+    constructor(target) {
+        super(target);
+        getPlaceholders(target).forEach((property) => (this.data[property] = ''));
+        observe(this);
+        this.#attachCallbacks();
+    }
+    #attachCallbacks() {
+        let target = this.target, hide = false;
+        (target.getAttributeNames ? target.getAttributeNames() : [])
+            .filter((attr) => target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g))
+            .forEach((attr) => {
+            let placeholders = new Set(target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g));
+            this.data.observe(((template) => (data) => {
+                let result = template;
+                placeholders.forEach((placeholder) => {
+                    result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
+                });
+                target.setAttribute(attr, result);
+            })(target.getAttribute(attr)));
+        });
+        [...target.childNodes]
+            .filter((childNode) => {
+            return (childNode.nodeType === 3 && (childNode.nodeValue || '').match(/\{[^\{\}]*\}/g));
+        })
+            .forEach((childNode) => {
+            hide = true;
+            let placeholders = new Set(childNode.nodeValue.match(/\{[^\{\}]*\}/g));
+            this.data.observe(((template) => (data) => {
+                let result = template;
+                placeholders.forEach((placeholder) => {
+                    result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
+                });
+                if (this.oldDisplay) {
+                    target.style = this.oldDisplay;
+                }
+                else {
+                    target.removeAttribute('style');
+                }
+                delete this.oldDisplay;
+                childNode.nodeValue = result;
+            })(childNode.nodeValue));
+            this.oldDisplay = target.getAttribute('style') || '';
+            if (hide &&
+                !inputs.includes(target.constructor) &&
+                target.tagName !== 'FIELDSET') {
+                target.style.display = 'none';
+            }
+        });
+    }
+    onData(ev) {
+        let data = {};
+        Object.keys(ev.detail.data).forEach((key) => {
+            if (this.data.hasOwnProperty(key))
+                data[key] = ev.detail.data[key];
+        });
+        if (JSON.stringify(data) !== JSON.stringify(this.data))
+            Object.assign(this.data, data);
+    }
+}
+function getPlaceholderElements(target) {
+    let elements = [target]
+        .concat([...target.querySelectorAll('*')])
+        .filter((e) => !!getPlaceholders(e).length)
+        .filter((e) => e?.tagName !== 'STYLE')
+        .reverse();
+    return elements;
+}
+function makePlaceholders(element) {
+    getPlaceholderElements(element).forEach((e) => {
+        if (e?._mc?._placeholders)
+            return;
+        DC.add(e, '_placeholders', new Placeholders(e));
+    });
+}
+const classRepo = {};
+function makeObservable(val) {
+    const Constructor = val.constructor, ConstructorName = Constructor.name;
+    let ObservableClass = class extends Constructor {
+        #notify = true;
+        #callbacks = [];
+        constructor(val) {
+            super(val);
+            this.constructor.callbacks = [];
+            if (isObservableObject(val)) {
+                Object.getOwnPropertyNames(val).forEach((key) => {
+                    this[key] = val[key];
+                });
+            }
+        }
+        get callbacks() {
+            return this.#callbacks;
+        }
+        set callbacks(callbacks) {
+            this.#callbacks = callbacks;
+        }
+        observe(callback) {
+            this.#callbacks.push(callback);
+            return this;
+        }
+        bind(target) {
+            const iso = isObservableObject(this.valueOf());
+            if (iso) {
+                makePlaceholders(target);
+                const placeholders = [target, ...target.querySelectorAll('[data-mc]')].filter((e) => !!e?._mc?._placeholders);
+                const func = function callback(data) {
+                    let flattenedData = flattenObject(data);
+                    placeholders.forEach((node) => {
+                        if (!node)
+                            return;
+                        trigger(node, 'data', flattenedData);
+                    });
+                };
+                this.#callbacks.push(func);
+                this.notify();
+            }
+            else {
+                console.warn('IGNORED - cannot bind a non-Object to the dom, IS:', typeof this.valueOf(), this);
+            }
+            return this;
+        }
+        notify(notify) {
+            let data = isObservableObject(this.valueOf()) && this.valueOf() instanceof Array === false
+                ? structuredClone(Object.assign({}, this))
+                : this.valueOf();
+            if (notify !== undefined) {
+                this.#notify = notify;
+            }
+            if (this.#notify) {
+                this.#callbacks.forEach((f) => {
+                    f(data);
+                });
+            }
+            return this;
+        }
+    };
+    classRepo[ConstructorName] = ObservableClass;
+    return ObservableClass;
+}
+function getConstructor(val) {
+    let key = val.constructor.name;
+    return classRepo[key] || makeObservable(val);
+}
+export const observe = (target, propertyName) => {
+    let keys = !propertyName ? [...Object.getOwnPropertyNames(target)] : [propertyName];
+    keys.forEach((key) => {
+        if (target.hasOwnProperty(key) &&
+            typeof target[key] !== 'function' &&
+            !target?.[key]?.constructor?.prototype?.observe) {
+            if (key[0] === '_' || target?.[key] === undefined)
+                return target;
+            let val = target[key];
+            let o = new (getConstructor(val))(val);
+            let debouncedNotify = debounce(function debouncedNotify() {
+                o.notify();
+            }, 0);
+            Object.defineProperty(target, key, {
+                enumerable: true,
+                get() {
+                    if (isObservableObject(o.valueOf())) {
+                        let check = structuredClone(Object.assign({}, o));
+                        setTimeout(function checkChanges() {
+                            let state = structuredClone(Object.assign({}, o));
+                            if (!deepEqual(state, check)) {
+                                debouncedNotify();
+                            }
+                        }, 0);
+                    }
+                    return o;
+                },
+                set(val) {
+                    if (typeof val === typeof o.valueOf()) {
+                        let iso = isObservableObject(o.valueOf()) && o.valueOf() instanceof Array === false;
+                        if (iso) {
+                            if (o?.constructor?.prototype?.observe === undefined) {
+                                o = new (getConstructor(val))(structuredClone(Object.assign({}, val)));
+                                copyGettersSetters(val, o);
+                            }
+                            Object.assign(o, val);
+                            o.notify();
+                        }
+                        else {
+                            let old = o.valueOf(), callbacks = o.callbacks;
+                            if (val !== old) {
+                                o = new (getConstructor(val))(val);
+                                o.callbacks = callbacks;
+                                debouncedNotify();
+                            }
+                        }
+                    }
+                    else {
+                        console.warn('IGNORED - cannot change observable types, IS:', typeof o.valueOf(), o, '- CANNOT BECOME:', typeof val);
+                    }
+                },
+            });
+            target[key] = val;
+        }
+    });
+    return target;
+};

package/dist/observables.min.js

@@ -0,0 +1 @@
+var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var c;(c=t[n])&&c.constructor&&c.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let c={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]instanceof Object){const r=n(t[e],!1);c[e]={};for(const t in r)c[e+"."+t]=r[t]}else c[e]=t[e]})),e?r(c):c}t.d(e,{l:()=>y});const c=new Function("try {return this===window;}catch(e){ return false;}");function a(t){return t&&t instanceof HTMLElement}function o(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function s(t,e,r,n=!1){return t.addEventListener(o(e),r,{capture:!1,once:n}),r}class i{stopped=!1;constructor(){}stop(){this.stopped=!0}}function l(t,e,r={},n="l",c){const a=/^_mc/.test(e)?e:o(e),s=c||new i,l=new CustomEvent(a,{detail:{data:r,control:s},bubbles:!1});s.stopped||/l/.test(n)&&(t.dispatchEvent(l),l.stopImmediatePropagation(),s.stopped)||/[ud]/.test(n)&&(-1===n.indexOf("l")&&(n+="l"),setTimeout((()=>{if(n.indexOf("u")>-1){let e=t.parentElement?.closest("[data-mc]");e&&e?._mc.trigger(a,r,n,s)}if(n.indexOf("d")>-1){let e=t._mc.children();e&&e.forEach((t=>t.trigger(a,r,n)))}}),0))}class u{_target;constructor(t){var e;this._target=new WeakRef(t||{}),function(t){if(!c()||t.constructor===f)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^(on[A-Z]|one[A-Z])/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((t=>{let n=/^one/.test(t),c=t.replace(/^on[e]{0,1}/,""),a=c.toLowerCase();if("on"+a in e){let n=e=>{r[t](e)};e.addEventListener(a,n)}else s(e,c,(e=>{r[t](e)}),n)}))}}(this),e=this,setTimeout((()=>{e.constructor!==f&&e.trigger("Init")}),0)}get target(){return this._target.deref()}}class f extends u{constructor(t){super(t)}static add(t,e,r={}){return function(t,e,r={}){let n=t;n._mc||(n._mc=new f(t));const c=n._mc;return e.length&&!c[e]&&(c[e]=r,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),n}(t,e,r)}static remove(t,e){!function(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}(t,e)}off(t,e){!function(t,e,r){t.removeEventListener(o(e),r)}(this.target,t,e)}on(t,e){return s(this.target,t,e)}one(t,e){return function(t,e,r){return s(t,e,r,!0),r}(this.target,t,e)}trigger(t,e={},r="l",n){l(this.target,t,e,r,n)}ancestors(){let t=this?.target,e=[];if(!a(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return a(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return a(t)?function(t){const e=Math.random().toString().replace(".",""),r='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const n=[...t.querySelectorAll(r)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),n.length?n:null}(t):null}descendants(){const t=this?.target;if(!a(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}function d(t){return null!=t&&"object"==typeof t}function h(t){let e=new Set,r=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(r))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(r));n.forEach((t=>n.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t.nodeValue||"").match(r).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}new Set;const p=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class m extends f{data={};oldDisplay="";constructor(t){super(t),h(t).forEach((t=>this.data[t]="")),y(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var n;this.data.observe((n=t.getAttribute(e),c=>{let a=n;r.forEach((t=>{a=a.replace(t,c[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,a)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{e=!0;let n=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>c=>{let a=e;n.forEach((t=>{a=a.replace(t,c[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=a})(r.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!p.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((r=>{this.data.hasOwnProperty(r)&&(e[r]=t.detail.data[r])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const g={};function b(t){let e=t.constructor.name;return g[e]||function(t){const e=t.constructor,r=e.name;let c=class extends e{#e=!0;#r=[];constructor(t){super(t),this.constructor.callbacks=[],d(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#r}set callbacks(t){this.#r=t}observe(t){return this.#r.push(t),this}bind(t){if(d(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!h(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||f.add(t,"_placeholders",new m(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),r=function(t){let r=n(t);e.forEach((t=>{t&&l(t,"data",r)}))};this.#r.push(r),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(t){let e=d(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#e&&this.#r.forEach((t=>{t(e)})),this}};return g[r]=c,c}(t)}const y=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let r=t[e],c=new(b(r))(r),a=function(){let t;return()=>{clearTimeout(t),t=setTimeout((function(){!function(){c.notify()}(...arguments)}),0)}}();Object.defineProperty(t,e,{enumerable:!0,get(){if(d(c.valueOf())){let t=structuredClone(Object.assign({},c));setTimeout((function(){var e,r;e=structuredClone(Object.assign({},c)),r=t,JSON.stringify(n(e))!==JSON.stringify(n(r))&&a()}),0)}return c},set(t){if(typeof t==typeof c.valueOf())if(d(c.valueOf())&&c.valueOf()instanceof Array==0)void 0===c?.constructor?.prototype?.observe&&(c=new(b(t))(structuredClone(Object.assign({},t))),function(t,e){const r=Object.getOwnPropertyDescriptors(t);for(const[t,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(e,t,n)}(t,c)),Object.assign(c,t),c.notify();else{let e=c.valueOf(),r=c.callbacks;t!==e&&(c=new(b(t))(t),c.callbacks=r,a())}else console.warn("IGNORED - cannot change observable types, IS:",typeof c.valueOf(),c,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);var O=e.l;export{O as observe};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@twobirds/microcomponents",
-	"version": "0.1.19",
+	"version": "0.1.20",
 	"description": "Micro Components Organization Class",
 	"main": "./dist/microcomponents.ts",
 	"types": "./dist/microcomponents.d.ts",
@@ -16,14 +16,14 @@
 	"sideEffects": false,
 	"scripts": {
 		"format": "prettier --write \"src/**/*.{ts,js}\"",
-		"lint": "eslint \"src/**/*.{ts,js}\" --fix > eslint.log",
+		"lint": "eslint \"src/**/*.{ts}\" --fix > eslint.log",
 		"typedoc": "typedoc",
 		"webpack": "webpack",
 		"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;",
+		"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 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;",
+		"copyToPublic2": "cp -R assets/* public || true; cp -R build/* 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 ../..",