@twobirds/microcomponents 0.0.20 → 0.0.22

package/public/customObservables.js

@@ -0,0 +1,255 @@
+"use strict";
+import { isObject, parse, debounce, deepEqual } from './helpers.js';
+export const makeCO = (target, propertyName) => {
+    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;
+        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 {
+            constructor(val) {
+                super(val);
+                this.constructor.callbacks = [];
+                if (isObject(val)) { // you cannot bind native values to the dom
+                    this.constructor.bound = [];
+                    Object.getOwnPropertyNames(val).forEach((key) => {
+                        this[key] = val[key];
+                    });
+                }
+            }
+            observe(f) {
+                //console.log('observe');
+                this.constructor.callbacks.push(f);
+                return this;
+            }
+            bind(target) {
+                const that = this, iso = isObject(that.valueOf()), bound = that.constructor.bound;
+                //console.log('bind', iso, target);
+                if (iso) {
+                    // console.log('bind...', that.valueOf(), target );
+                    function walk(element) {
+                        //console.log('-walk:', element, element.childNodes );
+                        if (!!element['nodeType'] && element.nodeType === 3) { // text node
+                            //console.log('--type: textNode(3)');
+                            var placeholders = Array.from(element.nodeValue && element.nodeValue.match(/\{[^\{\}]*\}/g) || []);
+                            if (placeholders.length > 0) {
+                                //console.log('--placeholders:', placeholders);
+                                var f = (function (template) {
+                                    //console.log('template', template);
+                                    return function (values) {
+                                        var t, changed = false;
+                                        //console.log( 'placeholders:', placeholders, 'values:', values);
+                                        if (placeholders) {
+                                            if (iso) {
+                                                placeholders.forEach(function (placeholder) {
+                                                    if (f.values[placeholder] !== values[placeholder]) {
+                                                        f.values[placeholder] = values[placeholder];
+                                                        changed = true;
+                                                    }
+                                                });
+                                            }
+                                            else { // it is a simple value
+                                                f.values = values;
+                                                changed = true;
+                                            }
+                                            ;
+                                        }
+                                        if (changed) { // only reflow if changed
+                                            t = template;
+                                            //console.log('--template parse', t, (f as LooseObject).values );
+                                            if (iso) {
+                                                element.nodeValue = parse(t, f.values);
+                                            }
+                                            else { // it is a simple value -> replace every placeholder whatever the name wi
+                                                element.nodeValue = t.replace(/\{.*\}/g, f.values);
+                                            }
+                                            ;
+                                        }
+                                        return values;
+                                    };
+                                })(element.nodeValue || '');
+                                f.values = iso ? {} : undefined;
+                                placeholders = Array.from(placeholders).map((pKey) => pKey.replace(/[\{\}]/g, '').trim());
+                                let initial = iso ? {} : undefined;
+                                placeholders.forEach(function (pKey) {
+                                    if (iso) {
+                                        initial[pKey] = "";
+                                    }
+                                });
+                                bound.push(f);
+                                // console.log( `--bound textNode`, placeholders, f );
+                                //(observableFunction as Function)(initial);
+                            }
+                            //console.log('--childNodes:', element.childNodes );
+                            Array.from(element.childNodes)
+                                .forEach(function (childNode) {
+                                walk(childNode);
+                            });
+                            that.notify();
+                        }
+                        if (!!element['nodeType'] && element.nodeType === 1) { // HTML element
+                            //console.log('--type: HTMLElement(1)');
+                            Array.from(element.attributes)
+                                .forEach(function (attributeNode) {
+                                var placeholders = Array.from(attributeNode.value && attributeNode.value.match(/\{[^\{\}]*\}/g) || []);
+                                if (placeholders.length > 0) {
+                                    //console.log( `--[${attributeNode.value}] placeholders:`, placeholders );
+                                    var f = (function (template) {
+                                        return function (values) {
+                                            var t, changed = false;
+                                            //console.log( 'placeholders:', placeholders, 'values:', values);
+                                            if (placeholders) {
+                                                placeholders.forEach(function (pKey) {
+                                                    if (f.values[pKey] !== values[pKey]) {
+                                                        f.values[pKey] = values[pKey];
+                                                        changed = true;
+                                                    }
+                                                });
+                                            }
+                                            if (changed) { // only reflow if changed
+                                                t = template;
+                                                element.nodeValue = parse(t, f.values);
+                                            }
+                                            return values;
+                                        };
+                                    })(attributeNode.value || '');
+                                    f.values = {};
+                                    placeholders = Array.from(placeholders).map((pKey) => pKey.replace(/[\{\}]/g, '').trim());
+                                    let initial = {};
+                                    placeholders.forEach(function (pKey) {
+                                        initial[pKey] = "";
+                                    });
+                                    bound.push(f);
+                                    // console.log( `--bound element attribute`, placeholders, f );
+                                    // console.log( `--bound`, observableFunction.bound );
+                                    //(observableFunction as Function)(initial);
+                                }
+                            });
+                            //console.log('--childNodes:', element.childNodes );
+                            Array.from(element.childNodes)
+                                .forEach(function (childNode) {
+                                walk(childNode);
+                            });
+                            that.notify();
+                        }
+                        if (!!element['nodeType'] && element.nodeType === 11) { // shadowRoot node
+                            // console.log( element, element.childNodes );
+                            Array.from(element.childNodes)
+                                .forEach(function (childNode) {
+                                walk(childNode);
+                            });
+                        }
+                    }
+                    walk(target);
+                    if (bound.length > 0) {
+                        that.notify();
+                    }
+                }
+                else {
+                    console.warn('IGNORED - cannot bind a non-Object to the dom, IS:', typeof that.valueOf());
+                }
+                return this;
+            }
+            notify() {
+                let that = this, data = isObject(that.valueOf()) && (that.valueOf() instanceof Array) === false
+                    ? structuredClone(Object.assign({}, that))
+                    : that.valueOf();
+                // console.log('notify', that.constructor, (that.constructor as any).callbacks.length, (that.constructor as any)?.bound?.length, data );
+                that.constructor.callbacks.forEach((f) => {
+                    // console.log( 'callback', f, data);
+                    f(data);
+                });
+                if (isObject(that.valueOf())) {
+                    // console.log('bound', this.constructor);
+                    that.constructor.bound.forEach((f) => {
+                        // console.log( 'bound', f, data);
+                        f(data);
+                    });
+                }
+                return this;
+            }
+        };
+        //(Observable.constructor as LooseObject).callbacks = [];
+        let o = new Observable(val);
+        Object.defineProperty(target, key, {
+            enumerable: true,
+            get() {
+                if (isObject(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) {
+                //console.log( 'SET:', isObject( val.valueOf() ), 'set:', val, 'to', isObject( o.valueOf() ), o, );
+                if (typeof val === typeof o.valueOf()) {
+                    let iso = isObject(o.valueOf()) && (o.valueOf() instanceof Array) === false;
+                    //let iso = o.constructor.prototype.__proto__.constructor === Object;
+                    //console.log('target iso:', iso);
+                    if (iso) {
+                        let old = structuredClone(Object.assign({}, o));
+                        val = structuredClone(Object.assign({}, val));
+                        let hasFormHandler = o.constructor?.hasFormHandler ?? false, callbacks = o.constructor.callbacks, bound = o.constructor.bound;
+                        o = new Observable(structuredClone(Object.assign({}, val)));
+                        //console.log('after set o=', o, 'check', old);
+                        o.constructor.callbacks = hasFormHandler;
+                        o.constructor.callbacks = callbacks;
+                        o.constructor.bound = bound;
+                        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.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(), '- CANNOT BECOME:', typeof val);
+                }
+            }
+        });
+        target[key] = val;
+    });
+};

package/public/customObservables.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.customObservables=t():e.customObservables=t()}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var o in r)e.o(r,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:r[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function r(e){return null!=e&&"object"==typeof e}function o(e,t){let r;return()=>{clearTimeout(r),r=setTimeout((function(){e(...arguments)}),t)}}function n(e,t){const o=Object.keys(e),c=Object.keys(t);if(o.length!==c.length)return!1;for(const c of o){const o=e[c],a=t[c],u=r(o)&&r(a);if(u&&!n(o,a)||!u&&o!==a)return!1}return!0}function c(e,t,o=null,n){let a=e.split(".");n||(n=t);let u=a.shift(),s=a.join(".");null!==o&&u.length&&void 0===t[u]&&(t[u]={});let l=t[u];return 0===s.length?null!==o?(t[u]=o,n):t[u]:r(t[u])?c(s,t[u],o,n):o?n:l[u]}function a(e,t){var o=Array.from(arguments);if(o.length){if(1===o.length)return o[1];if(o.length>2){for(;o.length>1;)o[0]=a(o[0],o[1]),o.splice(1,1);return o[0]}if("string"==typeof e){var n=e.match(/\{[^\{\}]*\}/g);n&&n.forEach((function(r){var o=c(r.substr(1,r.length-2),t);void 0!==o&&(e=e.replace(r,o))}))}else if(r(e))switch(e.constructor){case Object:Object.keys(e).forEach((function(r){e.hasOwnProperty(r)&&(e[r]=a(e[r],t))}));break;case Array:e.forEach((function(r,o,n){n[o]=a(e[o],t)}))}return e}console.error("no arguments give to parse")}e.r(t),e.d(t,{makeCO:()=>u});const u=(e,t)=>{(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if("_"===t[0]||void 0===e?.[t])return;let c,u=e[t];if(!u.prototype)switch(typeof u){case"string":c=String;break;case"number":c=Number;break;case"boolean":c=Boolean;break;case"object":c=u instanceof Array?Array:Object;break;default:return}let s=class extends c{constructor(e){super(e),this.constructor.callbacks=[],r(e)&&(this.constructor.bound=[],Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]})))}observe(e){return this.constructor.callbacks.push(e),this}bind(e){const t=this,o=r(t.valueOf()),n=t.constructor.bound;if(o){function c(e){if(e.nodeType&&3===e.nodeType){var r=Array.from(e.nodeValue&&e.nodeValue.match(/\{[^\{\}]*\}/g)||[]);if(r.length>0){var u=(s=e.nodeValue||"",function(t){var n,c=!1;return r&&(o?r.forEach((function(e){u.values[e]!==t[e]&&(u.values[e]=t[e],c=!0)})):(u.values=t,c=!0)),c&&(n=s,e.nodeValue=o?a(n,u.values):n.replace(/\{.*\}/g,u.values)),t});u.values=o?{}:void 0,r=Array.from(r).map((e=>e.replace(/[\{\}]/g,"").trim()));let t=o?{}:void 0;r.forEach((function(e){o&&(t[e]="")})),n.push(u)}Array.from(e.childNodes).forEach((function(e){c(e)})),t.notify()}var s;e.nodeType&&1===e.nodeType&&(Array.from(e.attributes).forEach((function(t){var r=Array.from(t.value&&t.value.match(/\{[^\{\}]*\}/g)||[]);if(r.length>0){var o=function(t){return function(n){var c,u=!1;return r&&r.forEach((function(e){o.values[e]!==n[e]&&(o.values[e]=n[e],u=!0)})),u&&(c=t,e.nodeValue=a(c,o.values)),n}}(t.value||"");o.values={},r=Array.from(r).map((e=>e.replace(/[\{\}]/g,"").trim()));let c={};r.forEach((function(e){c[e]=""})),n.push(o)}})),Array.from(e.childNodes).forEach((function(e){c(e)})),t.notify()),e.nodeType&&11===e.nodeType&&Array.from(e.childNodes).forEach((function(e){c(e)}))}c(e),n.length>0&&t.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof t.valueOf());return this}notify(){let e=this,t=r(e.valueOf())&&e.valueOf()instanceof Array==0?structuredClone(Object.assign({},e)):e.valueOf();return e.constructor.callbacks.forEach((e=>{e(t)})),r(e.valueOf())&&e.constructor.bound.forEach((e=>{e(t)})),this}},l=new s(u);Object.defineProperty(e,t,{enumerable:!0,get(){if(r(l.valueOf())){let e=structuredClone(Object.assign({},l));setTimeout(o((function(){n(structuredClone(Object.assign({},l)),e)||l.notify()}),0),0)}return l},set(e){if(typeof e==typeof l.valueOf())if(r(l.valueOf())&&l.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},l));e=structuredClone(Object.assign({},e));let r=l.constructor?.hasFormHandler??!1,c=l.constructor.callbacks,a=l.constructor.bound;l=new s(structuredClone(Object.assign({},e))),l.constructor.callbacks=r,l.constructor.callbacks=c,l.constructor.bound=a,setTimeout(o((function(){n(structuredClone(Object.assign({},l)),t)||l.notify()}),0),0)}else{let t=l.valueOf(),r=l.constructor.callbacks;l=new s(e),l.constructor.callbacks=r,e!==t&&l.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof l.valueOf(),"- CANNOT BECOME:",typeof e)}}),e[t]=u}))};return t})()));