@twobirds/microcomponents 0.0.67 → 0.0.69

package/public/test/microcomponents.ts

@@ -0,0 +1,8 @@
+"use strict";
+export * from './helpers.js';
+export * from './MC.js';
+export * from './McEvent.js';
+export * from './elements.js';
+export * from './observables.js';
+//export * from './selectors.js';
+export * from './formValues.js';

package/public/test/observables.d.ts

@@ -0,0 +1,10 @@
+import { LooseObject } from './helpers.js';
+type Callback = (value: any) => void;
+export type Observable = {
+    observe: (cb: Callback) => void;
+    notify: () => void;
+    bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void;
+};
+export declare const observe: (target: LooseObject, propertyName?: string) => LooseObject;
+export {};
+//# sourceMappingURL=observables.d.ts.map

package/public/test/observables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"observables.d.ts","sourceRoot":"","sources":["../src/observables.ts"],"names":[],"mappings":"AAEA,OAAO,EACN,WAAW,EAKX,MAAM,cAAc,CAAC;AAQtB,KAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;AAiLrC,MAAM,MAAM,UAAU,GAAG;IACxB,OAAO,EAAE,CAAC,EAAE,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,gBAAgB,GAAG,UAAU,KAAK,IAAI,CAAC;CACpE,CAAC;AAEF,eAAO,MAAM,OAAO,WACX,WAAW,iBACJ,MAAM,KACnB,WAsMF,CAAC"}

package/public/test/observables.js

@@ -0,0 +1,250 @@
+'use strict';
+import { debounce, deepEqual, flattenObject, copyGettersSetters, } from './helpers.js';
+import { DC } from './MC.js';
+function isObservableObject(value) {
+    return value != null && typeof value === 'object';
+}
+function getPlaceholders(target) {
+    let placeholders = new Set(), regEx = /\{[^\{\}]*\}/g;
+    target
+        .getAttributeNames()
+        .filter((attr) => target.getAttribute(attr)?.match(regEx))
+        .forEach((attr) => {
+        let phs = new Set(target.getAttribute(attr)?.match(regEx));
+        phs.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);
+        let that = this;
+        getPlaceholders(target).forEach((property) => (that.data[property] = ''));
+        observe(that);
+        that.#attachCallbacks();
+        delete that._mc;
+    }
+    #attachCallbacks() {
+        let that = this, target = that.target, hide = false;
+        target
+            .getAttributeNames()
+            .filter((attr) => target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g))
+            .forEach((attr) => {
+            let phs = new Set(target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g));
+            that.data.observe(((template) => (data) => {
+                let result = template;
+                phs.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 phs = new Set(childNode.nodeValue.match(/\{[^\{\}]*\}/g));
+            that.data.observe(((template) => (data) => {
+                let result = template;
+                phs.forEach((placeholder) => {
+                    result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
+                });
+                if (Object.keys(data).some((key) => {
+                    return !!data[key];
+                })) {
+                    if (!!that.oldDisplay) {
+                        target.style = that.oldDisplay;
+                    }
+                    else {
+                        target.removeAttribute('style');
+                    }
+                    delete that.oldDisplay;
+                }
+                childNode.nodeValue = result;
+            })(childNode.nodeValue));
+            that.oldDisplay = target.getAttribute('style)') || '';
+            if (hide &&
+                !inputs.includes(target.constructor) &&
+                target.tagName !== 'FIELDSET') {
+                target.style.display = 'none';
+            }
+        });
+    }
+    onData(ev) {
+        let that = this, data = {};
+        Object.keys(ev.data).forEach((key) => {
+            if (that.data.hasOwnProperty(key))
+                data[key] = ev.data[key];
+        });
+        if (JSON.stringify(data) !== JSON.stringify(that.data))
+            Object.assign(that.data, data);
+    }
+}
+function getPlaceholderElements(target) {
+    let elements = (target instanceof HTMLElement ? [target] : [])
+        .concat([...target.querySelectorAll('*')])
+        .filter((e) => !!getPlaceholders(e).length)
+        .filter((e) => e.tagName !== 'STYLE');
+    return elements;
+}
+function makePlaceholders(element) {
+    getPlaceholderElements(element).forEach((e) => {
+        if (e?._mc?._placeholders)
+            return;
+        DC.add(e, '_placeholders', new Placeholders(e));
+    });
+}
+export const observe = (target, propertyName) => {
+    let keys = !propertyName
+        ? [...Object.getOwnPropertyNames(target)]
+        : [propertyName];
+    keys.forEach((key) => {
+        if (key[0] === '_' || target?.[key] === undefined)
+            return target;
+        let val = target[key], Constructor;
+        if (!val.prototype) {
+            switch (typeof val) {
+                case 'string':
+                    Constructor = String;
+                    break;
+                case 'number':
+                    Constructor = Number;
+                    break;
+                case 'boolean':
+                    Constructor = Boolean;
+                    break;
+                case 'object':
+                    if (val instanceof Array) {
+                        Constructor = Array;
+                    }
+                    else {
+                        Constructor = Object;
+                    }
+                    break;
+                default:
+                    return;
+            }
+        }
+        let Observable = class extends Constructor {
+            #notify = true;
+            constructor(val) {
+                super(val);
+                this.constructor.callbacks = [];
+                if (isObservableObject(val)) {
+                    Object.getOwnPropertyNames(val).forEach((key) => {
+                        this[key] = val[key];
+                    });
+                }
+            }
+            observe(f) {
+                this.constructor.callbacks.push(f);
+                return this;
+            }
+            bind(target) {
+                const that = this, iso = isObservableObject(that.valueOf());
+                if (iso) {
+                    makePlaceholders(target);
+                    const placeholders = [
+                        ...target.querySelectorAll('[_mc]'),
+                    ].filter((e) => !!e?._mc?._placeholders);
+                    const func = function callback(data) {
+                        let d = flattenObject(data);
+                        placeholders.forEach((e) => {
+                            if (!e)
+                                return;
+                            e._mc.trigger('data', d);
+                        });
+                    };
+                    that.constructor.callbacks.push(func);
+                    that.notify();
+                }
+                else {
+                    console.warn('IGNORED - cannot bind a non-Object to the dom, IS:', typeof that.valueOf(), that);
+                }
+                return this;
+            }
+            notify(notify) {
+                let that = this, data = isObservableObject(that.valueOf()) &&
+                    that.valueOf() instanceof Array === false
+                    ? structuredClone(Object.assign({}, that))
+                    : that.valueOf();
+                if (notify !== undefined) {
+                    that.#notify = notify;
+                }
+                that.constructor.callbacks.forEach((f) => {
+                    f(data);
+                });
+                return that;
+            }
+        };
+        let o = new Observable(val);
+        Object.defineProperty(target, key, {
+            enumerable: true,
+            get() {
+                if (isObservableObject(o.valueOf())) {
+                    let check = structuredClone(Object.assign({}, o));
+                    setTimeout(debounce(function checkChanges() {
+                        let state = structuredClone(Object.assign({}, o));
+                        if (!deepEqual(state, check)) {
+                            o.notify();
+                        }
+                    }, 0), 0);
+                }
+                return o;
+            },
+            set(val) {
+                if (typeof val === typeof o.valueOf()) {
+                    let iso = isObservableObject(o.valueOf()) &&
+                        o.valueOf() instanceof Array === false;
+                    if (iso) {
+                        let old = structuredClone(Object.assign({}, o));
+                        if (o instanceof Observable === false) {
+                            o = new Observable(structuredClone(Object.assign({}, val)));
+                            copyGettersSetters(val, o);
+                            o.seal();
+                        }
+                        Object.assign(o, val);
+                        setTimeout(debounce(function checkChanges() {
+                            let state = structuredClone(Object.assign({}, o));
+                            if (!deepEqual(state, old)) {
+                                o.notify();
+                            }
+                        }, 0), 0);
+                    }
+                    else {
+                        let old = o.valueOf(), callbacks = o.constructor.callbacks;
+                        o = new Observable(val);
+                        o.constructor.callbacks = callbacks;
+                        if (val !== old) {
+                            o.notify();
+                        }
+                    }
+                }
+                else {
+                    console.warn('IGNORED - cannot change observable types, IS:', typeof o.valueOf(), o, '- CANNOT BECOME:', typeof val);
+                }
+            },
+        });
+        target[key] = val;
+    });
+    return target;
+};
+//# sourceMappingURL=observables.js.map

package/public/test/observables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observables.js","sourceRoot":"","sources":["../src/observables.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAEN,QAAQ,EACR,SAAS,EACT,aAAa,EACb,kBAAkB,GAClB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,EAAE,EAA0B,MAAM,SAAS,CAAC;AAErD,SAAS,kBAAkB,CAAC,KAAU;IACrC,OAAO,KAAK,IAAI,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;AACnD,CAAC;AAID,SAAS,eAAe,CAAC,MAAmB;IAC3C,IAAI,YAAY,GAAgB,IAAI,GAAG,EAAE,EACxC,KAAK,GAAG,eAAe,CAAC;IAGzB,MAAM;SACJ,iBAAiB,EAAE;SACnB,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;SACzD,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACjB,IAAI,GAAG,GAAgB,IAAI,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QACxE,GAAG,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAC3B,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CACpD,CAAC;IACH,CAAC,CAAC,CAAC;IAGJ,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC;SACpB,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE;QACrB,OAAO,CAEN,SAAS,CAAC,QAAQ,KAAK,CAAC;YACxB,CAAE,SAAiB,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CACjD,CAAC;IACH,CAAC,CAAC;SACD,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;QACtB,CAAE,SAAiB,CAAC,SAAS,IAAI,EAAE,CAAC;aAClC,KAAK,CAAC,KAAK,CAAC;aACZ,OAAO,CAAC,CAAC,WAAmB,EAAE,EAAE;YAChC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;QACtD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAGJ,OAAO,CAAC,GAAG,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAC5C,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAClC,CAAC;AACH,CAAC;AAED,MAAM,MAAM,GAAG,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,CAAC,CAAC;AAE1E,MAAM,YAAa,SAAQ,EAAE;IAC5B,IAAI,GAAgB,EAAE,CAAC;IACvB,UAAU,GAAY,EAAE,CAAC;IAEzB,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;QACd,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,eAAe,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAC1E,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC,GAAG,CAAC;IACjB,CAAC;IAED,gBAAgB;QACf,IAAI,IAAI,GAAG,IAAI,EACd,MAAM,GAAG,IAAI,CAAC,MAAM,EACpB,IAAI,GAAY,KAAK,CAAC;QAKvB,MAAM;aACJ,iBAAiB,EAAE;aACnB,MAAM,CAAC,CAAC,IAAY,EAAE,EAAE,CACxB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,CACjD;aACA,OAAO,CAAC,CAAC,IAAY,EAAE,EAAE;YACzB,IAAI,GAAG,GAAgB,IAAI,GAAG,CAC7B,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,CACjD,CAAC;YAEF,IAAI,CAAC,IAAI,CAAC,OAAO,CAChB,CAAC,CAAC,QAAgB,EAAE,EAAE,CAAC,CAAC,IAAiB,EAAE,EAAE;gBAC5C,IAAI,MAAM,GAAW,QAAQ,CAAC;gBAC9B,GAAG,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;oBAC3B,MAAM,GAAG,MAAM,CAAC,OAAO,CACtB,WAAW,EACX,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CACxC,CAAC;gBACH,CAAC,CAAC,CAAC;gBACH,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YAEnC,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAC7B,CAAC;QACH,CAAC,CAAC,CAAC;QAGJ,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC;aACpB,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE;YACrB,OAAO,CAEN,SAAS,CAAC,QAAQ,KAAK,CAAC;gBACxB,CAAE,SAAiB,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAC3D,CAAC;QACH,CAAC,CAAC;aACD,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;YACtB,IAAI,GAAG,IAAI,CAAC;YACZ,IAAI,GAAG,GAAgB,IAAI,GAAG,CAC7B,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,eAAe,CAAC,CAC1C,CAAC;YAGF,IAAI,CAAC,IAAI,CAAC,OAAO,CAChB,CAAC,CAAC,QAAgB,EAAE,EAAE,CAAC,CAAC,IAAiB,EAAE,EAAE;gBAC5C,IAAI,MAAM,GAAW,QAAQ,CAAC;gBAE9B,GAAG,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;oBAC3B,MAAM,GAAG,MAAM,CAAC,OAAO,CACtB,WAAW,EACX,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CACxC,CAAC;gBACH,CAAC,CAAC,CAAC;gBACH,IACC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;oBAC9B,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACpB,CAAC,CAAC,EACD,CAAC;oBACF,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;wBACvB,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;oBAChC,CAAC;yBAAM,CAAC;wBACP,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;oBACjC,CAAC;oBACD,OAAO,IAAI,CAAC,UAAU,CAAC;gBACxB,CAAC;gBACD,SAAS,CAAC,SAAS,GAAG,MAAM,CAAC;YAC9B,CAAC,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CACvB,CAAC;YAGF,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YACtD,IACC,IAAI;gBACJ,CAAC,MAAM,CAAC,QAAQ,CAAE,MAAc,CAAC,WAAW,CAAC;gBAC7C,MAAM,CAAC,OAAO,KAAK,UAAU,EAC5B,CAAC;gBACF,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,CAAC;QACF,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,CAAC,EAAW;QACjB,IAAI,IAAI,GAAG,IAAI,EACd,IAAI,GAAgB,EAAE,CAAC;QACxB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACpC,IAAI,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC;gBAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;YACrD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACjC,CAAC;CACD;AAED,SAAS,sBAAsB,CAC9B,MAAmD;IAEnD,IAAI,QAAQ,GAAuB,CAClC,MAAM,YAAY,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAC7C;SACC,MAAM,CAAC,CAAC,GAAI,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAA8B,CAAC,CAAC;SACvE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAgB,CAAC,CAAC,MAAM,CAAC;SACzD,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC;IAEvC,OAAO,QAAyB,CAAC;AAClC,CAAC;AAED,SAAS,gBAAgB,CACxB,OAAoD;IAGpD,sBAAsB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAc,EAAE,EAAE;QAC1D,IAAK,CAAmB,EAAE,GAAG,EAAE,aAAa;YAAE,OAAO;QACrD,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,eAAe,EAAE,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;AACJ,CAAC;AAQD,MAAM,CAAC,MAAM,OAAO,GAAG,CACtB,MAAmB,EACnB,YAAqB,EACP,EAAE;IAChB,IAAI,IAAI,GAAG,CAAC,YAAY;QACvB,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;IAElB,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAEpB,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,MAAM,EAAE,CAAC,GAAG,CAAC,KAAK,SAAS;YAAE,OAAO,MAAM,CAAC;QACjE,IAAI,GAAG,GAAQ,MAAM,CAAC,GAAG,CAAC,EACzB,WAAgB,CAAC;QAElB,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC;YACpB,QAAQ,OAAO,GAAG,EAAE,CAAC;gBACpB,KAAK,QAAQ;oBACZ,WAAW,GAAG,MAAM,CAAC;oBACrB,MAAM;gBACP,KAAK,QAAQ;oBACZ,WAAW,GAAG,MAAM,CAAC;oBACrB,MAAM;gBACP,KAAK,SAAS;oBACb,WAAW,GAAG,OAAO,CAAC;oBACtB,MAAM;gBACP,KAAK,QAAQ;oBACZ,IAAI,GAAG,YAAY,KAAK,EAAE,CAAC;wBAC1B,WAAW,GAAG,KAAK,CAAC;oBACrB,CAAC;yBAAM,CAAC;wBACP,WAAW,GAAG,MAAM,CAAC;oBACtB,CAAC;oBACD,MAAM;gBACP;oBACC,OAAO;YACT,CAAC;QACF,CAAC;QAED,IAAI,UAAU,GAAG,KAAM,SAAQ,WAAW;YACzC,OAAO,GAAY,IAAI,CAAC;YAExB,YAAY,GAAQ;gBACnB,KAAK,CAAC,GAAG,CAAC,CAAC;gBACV,IAAI,CAAC,WAA2B,CAAC,SAAS,GAAG,EAAE,CAAC;gBACjD,IAAI,kBAAkB,CAAC,GAAG,CAAC,EAAE,CAAC;oBAE7B,MAAM,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;wBAC/C,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;oBACtB,CAAC,CAAC,CAAC;gBACJ,CAAC;YACF,CAAC;YAED,OAAO,CAAC,CAAW;gBAEjB,IAAI,CAAC,WAAmB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAC5C,OAAO,IAAI,CAAC;YACb,CAAC;YAED,IAAI,CAAC,MAAmD;gBACvD,MAAM,IAAI,GAAG,IAAI,EAChB,GAAG,GAAG,kBAAkB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;gBAG1C,IAAI,GAAG,EAAE,CAAC;oBACT,gBAAgB,CAAC,MAAM,CAAC,CAAC;oBACzB,MAAM,YAAY,GAAY;wBAC7B,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC;qBACnC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAE,CAAiB,EAAE,GAAG,EAAE,aAAa,CAAC,CAAC;oBAE1D,MAAM,IAAI,GAAG,SAAS,QAAQ,CAAC,IAAiB;wBAE/C,IAAI,CAAC,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;wBAE3B,YAAqB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;4BAEpC,IAAI,CAAC,CAAC;gCAAE,OAAO;4BACd,CAAS,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;wBACnC,CAAC,CAAC,CAAC;oBACJ,CAAC,CAAC;oBACD,IAAI,CAAC,WAAmB,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAC/C,IAAI,CAAC,MAAM,EAAE,CAAC;gBACf,CAAC;qBAAM,CAAC;oBACP,OAAO,CAAC,IAAI,CACX,oDAAoD,EACpD,OAAO,IAAI,CAAC,OAAO,EAAE,EACrB,IAAI,CACJ,CAAC;gBACH,CAAC;gBAED,OAAO,IAAI,CAAC;YACb,CAAC;YAED,MAAM,CAAC,MAAgB;gBACtB,IAAI,IAAI,GAAG,IAAI,EACd,IAAI,GACH,kBAAkB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;oBAClC,IAAI,CAAC,OAAO,EAAE,YAAY,KAAK,KAAK,KAAK;oBACxC,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;oBAC1C,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBAEpB,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;oBAC1B,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;gBAEvB,CAAC;gBAGA,IAAI,CAAC,WAAmB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAW,EAAE,EAAE;oBAO3D,CAAC,CAAC,IAAI,CAAC,CAAC;gBACT,CAAC,CAAC,CAAC;gBAEH,OAAO,IAAI,CAAC;YACb,CAAC;SACD,CAAC;QAEF,IAAI,CAAC,GAAG,IAAI,UAAU,CAAC,GAAG,CAAC,CAAC;QAE5B,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,GAAG,EAAE;YAClC,UAAU,EAAE,IAAI;YAChB,GAAG;gBACF,IAAI,kBAAkB,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;oBACrC,IAAI,KAAK,GAAG,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;oBAClD,UAAU,CACT,QAAQ,CAAC,SAAS,YAAY;wBAC7B,IAAI,KAAK,GAAG,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;wBAElD,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;4BAE9B,CAAC,CAAC,MAAM,EAAE,CAAC;wBACZ,CAAC;oBACF,CAAC,EAAE,CAAC,CAAC,EACL,CAAC,CACD,CAAC;gBACH,CAAC;gBACD,OAAO,CAAC,CAAC;YACV,CAAC;YACD,GAAG,CAAC,GAAQ;gBAEX,IAAI,OAAO,GAAG,KAAK,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;oBACvC,IAAI,GAAG,GACN,kBAAkB,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;wBAC/B,CAAC,CAAC,OAAO,EAAE,YAAY,KAAK,KAAK,KAAK,CAAC;oBAExC,IAAI,GAAG,EAAE,CAAC;wBACT,IAAI,GAAG,GAAG,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;wBAIhD,IAAI,CAAC,YAAY,UAAU,KAAK,KAAK,EAAE,CAAC;4BACvC,CAAC,GAAG,IAAI,UAAU,CAAC,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;4BAC5D,kBAAkB,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;4BAC3B,CAAC,CAAC,IAAI,EAAE,CAAC;wBACV,CAAC;wBACD,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;wBAKtB,UAAU,CAET,QAAQ,CAAC,SAAS,YAAY;4BAC7B,IAAI,KAAK,GAAG,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;4BAElD,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC;gCAE5B,CAAC,CAAC,MAAM,EAAE,CAAC;4BACZ,CAAC;wBACF,CAAC,EAAE,CAAC,CAAC,EACL,CAAC,CACD,CAAC;oBACH,CAAC;yBAAM,CAAC;wBAEP,IAAI,GAAG,GAAG,CAAC,CAAC,OAAO,EAAE,EACpB,SAAS,GAAI,CAAC,CAAC,WAA2B,CAAC,SAAS,CAAC;wBACtD,CAAC,GAAG,IAAI,UAAU,CAAC,GAAG,CAAC,CAAC;wBACvB,CAAC,CAAC,WAA2B,CAAC,SAAS,GAAG,SAAS,CAAC;wBACrD,IAAI,GAAG,KAAK,GAAG,EAAE,CAAC;4BACjB,CAAC,CAAC,MAAM,EAAE,CAAC;wBACZ,CAAC;oBACF,CAAC;gBACF,CAAC;qBAAM,CAAC;oBACP,OAAO,CAAC,IAAI,CACX,+CAA+C,EAC/C,OAAO,CAAC,CAAC,OAAO,EAAE,EAClB,CAAC,EACD,kBAAkB,EAClB,OAAO,GAAG,CACV,CAAC;gBACH,CAAC;YACF,CAAC;SACD,CAAC,CAAC;QAGH,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;IACnB,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AACf,CAAC,CAAC"}

package/public/test/observables.ts

@@ -0,0 +1,401 @@
+'use strict';
+
+import {
+	LooseObject,
+	debounce,
+	deepEqual,
+	flattenObject,
+	copyGettersSetters,
+} from './helpers.js';
+
+import { DC, HTMLMcElement, McEvent } from './MC.js';
+
+function isObservableObject(value: any): boolean {
+	return value != null && typeof value === 'object';
+}
+
+type Callback = (value: any) => void;
+
+function getPlaceholders(target: HTMLElement): string[] {
+	let placeholders: Set<string> = new Set(),
+		regEx = /\{[^\{\}]*\}/g;
+
+	// scan attributes
+	target
+		.getAttributeNames()
+		.filter((attr) => target.getAttribute(attr)?.match(regEx)) // extract placeholder(s)
+		.forEach((attr) => {
+			let phs: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
+			phs.forEach((placeholder) =>
+				placeholders.add(placeholder.replace(/[\{\}]/g, ''))
+			);
+		});
+
+	// scan children text nodes
+	[...target.childNodes]
+		.filter((childNode) => {
+			return (
+				// is text node and has placeholders
+				childNode.nodeType === 3 &&
+				((childNode as any).nodeValue || '').match(regEx)
+			);
+		})
+		.forEach((childNode) => {
+			((childNode as any).nodeValue || '')
+				.match(regEx)
+				.forEach((placeholder: string) => {
+					placeholders.add(placeholder.replace(/[\{\}]/g, ''));
+				});
+		});
+	
+	// extract {} and return result
+	return [...placeholders].map((placeholder) =>
+		placeholder.replace(/[\{\}]/g, '')
+	);
+}
+
+const inputs = [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement];
+
+class Placeholders extends DC {
+	data: LooseObject = {};
+	oldDisplay?: string = '';
+
+	constructor(target: HTMLElement) {
+		super(target);
+		let that = this;
+		getPlaceholders(target).forEach((property) => (that.data[property] = ''));
+		observe(that);
+		that.#attachCallbacks();
+		delete that._mc; // cleanup, not needed
+	}
+
+	#attachCallbacks() {
+		let that = this,
+			target = that.target,
+			hide: boolean = false;
+
+		//console.log('attachCallbacks', that.target);
+
+		// scan attributes
+		target
+			.getAttributeNames()
+			.filter((attr: string) =>
+				target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
+			) // extract placeholder(s)
+			.forEach((attr: string) => {
+				let phs: Set<string> = new Set(
+					target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
+				);
+				// attach callback
+				that.data.observe(
+					((template: string) => (data: LooseObject) => {
+						let result: string = template;
+						phs.forEach((placeholder) => {
+							result = result.replace(
+								placeholder,
+								data[placeholder.replace(/[\{\}]/g, '')]
+							);
+						});
+						target.setAttribute(attr, result);
+						//console.log('cb setAttribute()', data, template, attr, result);
+					})(target.getAttribute(attr))
+				);
+			});
+
+		// scan children text nodes
+		[...target.childNodes]
+			.filter((childNode) => {
+				return (
+					// is text node and has placeholders
+					childNode.nodeType === 3 &&
+					((childNode as any).nodeValue || '').match(/\{[^\{\}]*\}/g)
+				);
+			})
+			.forEach((childNode) => {
+				hide = true;
+				let phs: Set<string> = new Set(
+					childNode.nodeValue.match(/\{[^\{\}]*\}/g)
+				);
+
+				// attach callback
+				that.data.observe(
+					((template: string) => (data: LooseObject) => {
+						let result: string = template;
+						//console.log('text node "', template, '" callbach data:', data);
+						phs.forEach((placeholder) => {
+							result = result.replace(
+								placeholder,
+								data[placeholder.replace(/[\{\}]/g, '')]
+							);
+						});
+						if (
+							Object.keys(data).some((key) => {
+								return !!data[key];
+							})
+						) {
+							if (!!that.oldDisplay) {
+								target.style = that.oldDisplay;
+							} else {
+								target.removeAttribute('style');
+							}
+							delete that.oldDisplay;
+						}
+						childNode.nodeValue = result;
+					})(childNode.nodeValue)
+				);
+
+				// hide for now
+				that.oldDisplay = target.getAttribute('style)') || '';
+				if (
+					hide &&
+					!inputs.includes((target as any).constructor) &&
+					target.tagName !== 'FIELDSET'
+				) {
+					target.style.display = 'none';
+				}
+			});
+	}
+
+	onData(ev: McEvent) {
+		let that = this,
+			data: LooseObject = {};
+		Object.keys(ev.data).forEach((key) => {
+			if (that.data.hasOwnProperty(key)) data[key] = ev.data[key];
+		});
+		//console.log('onData()', ev, data, that.data);
+		if (JSON.stringify(data) !== JSON.stringify(that.data))
+			Object.assign(that.data, data); // will trigger callbacks
+	}
+}
+
+function getPlaceholderElements(
+	target: HTMLElement | DocumentFragment | ShadowRoot
+): HTMLElement[] {
+	let elements: Array<HTMLElement> = (
+		target instanceof HTMLElement ? [target] : []
+	)
+		.concat([...(target.querySelectorAll('*') as unknown as HTMLElement[])])
+		.filter((e) => !!getPlaceholders(e as HTMLElement).length)
+		.filter((e) => e.tagName !== 'STYLE');
+	//console.log('getPlaceholderElements', elements);
+	return elements as HTMLElement[];
+}
+
+function makePlaceholders(
+	element: HTMLElement | DocumentFragment | ShadowRoot
+): void {
+	//console.log('makePlaceholders', element);
+	getPlaceholderElements(element).forEach((e: HTMLElement) => {
+		if ((e as HTMLMcElement)?._mc?._placeholders) return;
+		DC.add(e, '_placeholders', new Placeholders(e));
+	});
+}
+
+export type Observable = {
+	observe: (cb: Callback) => void;
+	notify: () => void;
+	bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void;
+};
+
+export const observe = (
+	target: LooseObject,
+	propertyName?: string
+): LooseObject => {
+	let keys = !propertyName
+		? [...Object.getOwnPropertyNames(target)]
+		: [propertyName];
+
+	keys.forEach((key) => {
+		// console.log( 'co propname', key, typeof target[key], target[key] );
+		if (key[0] === '_' || target?.[key] === undefined) return target;
+		let val: any = target[key],
+			Constructor: any;
+
+		if (!val.prototype) {
+			switch (typeof val) {
+				case 'string':
+					Constructor = String;
+					break;
+				case 'number':
+					Constructor = Number;
+					break;
+				case 'boolean':
+					Constructor = Boolean;
+					break;
+				case 'object':
+					if (val instanceof Array) {
+						Constructor = Array;
+					} else {
+						Constructor = Object;
+					}
+					break;
+				default:
+					return;
+			}
+		}
+
+		let Observable = class extends Constructor {
+			#notify: boolean = true;
+
+			constructor(val: any) {
+				super(val);
+				(this.constructor as LooseObject).callbacks = [];
+				if (isObservableObject(val)) {
+					// you cannot bind native values to the dom
+					Object.getOwnPropertyNames(val).forEach((key) => {
+						this[key] = val[key];
+					});
+				}
+			}
+
+			observe(f: Function) {
+				//console.log('observe');
+				(this.constructor as any).callbacks.push(f);
+				return this;
+			}
+
+			bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
+				const that = this,
+					iso = isObservableObject(that.valueOf());
+				//console.log('bind', iso, target);
+
+				if (iso) {
+					makePlaceholders(target);
+					const placeholders: unknown = [
+						...target.querySelectorAll('[_mc]'),
+					].filter((e) => !!(e as LooseObject)?._mc?._placeholders);
+					//console.log('placeholders:', target, placeholders);
+					const func = function callback(data: LooseObject) {
+						// avoid bubbling for speed
+						let d = flattenObject(data);
+						//console.log('inside callback', target, d);
+						(placeholders as DC[]).forEach((e) => {
+							// console.log('trigger callback', e);
+							if (!e) return;
+							(e as any)._mc.trigger('data', d);
+						});
+					};
+					(that.constructor as any).callbacks.push(func);
+					that.notify();
+				} else {
+					console.warn(
+						'IGNORED - cannot bind a non-Object to the dom, IS:',
+						typeof that.valueOf(),
+						that
+					);
+				}
+
+				return this;
+			}
+
+			notify(notify?: boolean) {
+				let that = this,
+					data =
+						isObservableObject(that.valueOf()) &&
+						that.valueOf() instanceof Array === false
+							? structuredClone(Object.assign({}, that))
+							: that.valueOf();
+
+				if (notify !== undefined) {
+					that.#notify = notify;
+					// return;
+				}
+
+				//if (that.#notify) console.log('notify', this, data);
+				(that.constructor as any).callbacks.forEach((f: Function) => {
+					// console.log(
+					// 	(this.constructor as any).callbacks,
+					// 	'notify: exec callback',
+					// 	f,
+					// 	data
+					// );
+					f(data);
+				});
+
+				return that;
+			}
+		};
+
+		let o = new Observable(val);
+
+		Object.defineProperty(target, key, {
+			enumerable: true,
+			get() {
+				if (isObservableObject(o.valueOf())) {
+					let check = structuredClone(Object.assign({}, o));
+					setTimeout(
+						debounce(function checkChanges() {
+							let state = structuredClone(Object.assign({}, o));
+							//console.log( 'check changes', state, check );
+							if (!deepEqual(state, check)) {
+								//console.log( '-> not equal!' );
+								o.notify();
+							}
+						}, 0),
+						0
+					);
+				}
+				return o;
+			},
+			set(val: any) {
+				//console.log( 'SET:', isObservableObject( val.valueOf() ), 'set:', val, 'to', isObservableObject( o.valueOf() ), o, );
+				if (typeof val === typeof o.valueOf()) {
+					let iso =
+						isObservableObject(o.valueOf()) &&
+						o.valueOf() instanceof Array === false;
+					//console.log('target iso:', iso);
+					if (iso) {
+						let old = structuredClone(Object.assign({}, o));
+						//val = structuredClone(Object.assign({}, val));
+
+						//let callbacks = (o.constructor as LooseObject).callbacks;
+						if (o instanceof Observable === false) {
+							o = new Observable(structuredClone(Object.assign({}, val)));
+							copyGettersSetters(val, o);
+							o.seal();
+						}
+						Object.assign(o, val);
+
+						// console.log('after set o=', o, 'check', old);
+						// (o.constructor as LooseObject).callbacks = callbacks;
+
+						setTimeout(
+							// check for changes
+							debounce(function checkChanges() {
+								let state = structuredClone(Object.assign({}, o));
+								//console.log( 'check changes', state, check );
+								if (!deepEqual(state, old)) {
+									//console.log( '-> not equal!' );
+									o.notify();
+								}
+							}, 0),
+							0
+						);
+					} else {
+						// simple native var
+						let old = o.valueOf(),
+							callbacks = (o.constructor as LooseObject).callbacks;
+						o = new Observable(val);
+						(o.constructor as LooseObject).callbacks = callbacks;
+						if (val !== old) {
+							o.notify();
+						}
+					}
+				} else {
+					console.warn(
+						'IGNORED - cannot change observable types, IS:',
+						typeof o.valueOf(),
+						o,
+						'- CANNOT BECOME:',
+						typeof val
+					);
+				}
+			},
+		});
+
+		// replace old property with proxy (observable)
+		target[key] = val;
+	});
+
+	return target;
+};