@twobirds/microcomponents 0.0.34 → 0.0.39

package/src/test.ts

@@ -1,211 +1,190 @@
-"use strict";
-
-import { MC, DC, McEvent, defineCE, getCE, observe } from "./microcomponents.js";
-
-//import { MC, DC, typeof McEvent } from "./MC.js";
-//import { defineCE, getCE } from "./customElements.js";
-//import { observe } from "./customObservables.js";
+'use strict';
+
+import {
+	LooseObject,
+	MC,
+	DC,
+	McEvent,
+	defineCE,
+	getCE,
+	observe,
+	Observable,
+} from './microcomponents.js';
+
+//import { MC, DC, McEvent } from "./MC.js";
+//import { defineCE, getCE } from "./elements.js";
+//import { observe } from "./observables.js";
 
 //MC.debug = true;
 
-class Adder {
-	constructor() {}
-
-	sum(...numbers: number[]): number {
-		return numbers.reduce((acc: number, curr: number) => acc + curr, 0);
-	}
-}
+class Translator extends DC {
+	#translations: LooseObject = {};
 
-class DeeplyNestedEvTarget extends MC {
-	constructor(target: any) {
-		super(target);
-	}
+	Language: unknown = 'en';
+	Translation: unknown = {};
 
-	oneInit(ev: typeof McEvent) {
-		let logger = this.target?.target?.target?._mc?.logger;
-		//logger?.warn("DeeplyNestedEvTarget .oneInit(ev)", ev);
-	}
-}
+	constructor(
+		target: HTMLElement | ShadowRoot | DocumentFragment,
+		translations: LooseObject,
+		translationTargetObject: HTMLElement
+	) {
+		super(target as HTMLElement);
+		let that = this; // minifier help
 
-class EvTarget extends MC {
-	constructor(target: any) {
-		super(target);
-	}
+		// state
+		that.Language = 'en';
+		that.Translation = {};
 
-	onCustomEvent(ev: typeof McEvent) {
-		let logger = this.target?.target?._mc?.logger;
-		logger?.log("onCustomEvent", ev);
-	}
+		observe(that);
 
-	oneInit(ev: typeof McEvent) {
-		let that = this,
-			_mc = that._mc!,
-			logger = this.target?.target?._mc?.logger;
+		// setup
+		that.#translations = translations;
 
-		//logger?.warn("EvTarget .oneInit(ev)", ev);
+		// state
+		(that.Language as Observable).observe((lang) => {
+			if (that.#translations.hasOwnProperty(lang)) {
+				that.Translation = { lang: that.#translations[lang] }; // set translation
+			}
+		});
 
-		_mc.deeplyNestedEvTarget = new DeeplyNestedEvTarget( that );
-	}
-}
+		(that.Translation as Observable).bind(translationTargetObject);
 
-class Logger extends DC {
+		this.target.setAttribute('language', 'en');
 
-	prefix: string = "";
-
-	stdOut: typeof console = console;
-
-	constructor(target: HTMLElement, logger: typeof console, prefix: string) {
-		// logger must implement the console interface
-		super(target);
-
-		let that = this; // scoping and minifier help
-
-		that.prefix = prefix;
-
-		// instance that handles logging, depency injection
-		that.stdOut = logger;
+		(this.Language as Observable).notify();
 	}
 
-	log() {
-		this.stdOut.log(this.prefix, this.target.constructor.name, ...arguments);
+	oneInit() {
+		//(this.Language as Observable).notify(); // trigger translation
 	}
 
-	info() {
-		this.stdOut.info(this.prefix, this.target.constructor.name, ...arguments);
-	}
-	warn() {
-		this.stdOut.warn(this.prefix, this.target.constructor.name, ...arguments);
+	onAttributeChanged(ev: McEvent) {
+		if (!ev.data.newValue) return;
+
+		let that = this;
+
+		switch (ev.data.name) {
+			case 'language':
+				that.Language = ev.data.newValue;
+				break;
+		}
 	}
 }
 
 defineCE(
 	// equivalent to custom element registry .define()
-	"my-tag",
+	'my-tag',
 	class MyTag extends DC {
+		#template: string = '<button>{lang.click} {counter}</button>';
 
-		In: string = "";
+		#languages = {
+			en: {
+				click: 'click me',
+			},
+			de: {
+				click: 'klick mich',
+			},
+		};
 
-		Counter: number = 0;
+		Dom: LooseObject = {};
 
-		constructor(target: HTMLElement, data: string) {
+		constructor(target: HTMLElement) {
 			super(target);
 
 			let that = this; // minifier help
 
-			// state  observables
-			that.In = data;
-			that.Counter = 0;
-
-			// convert all props defined so far into custom observables
-			observe(that);
-
-			DC.add(target, "logger", new Logger(target, console, "[logger]"));
+			// hide
+			target.setAttribute('style', 'display:none');
 
 			// render
-			target.innerHTML = "Click Me";
-		}
-
-		/*
-		web component specific event handlers
-		*/
-
-		onConnected(ev: typeof McEvent) {
-			//this.target._mc?.logger.info("onConnected handler", ev);
+			target.innerHTML = this.#template;
+
+			// add public translator
+			DC.add(
+				target,
+				'translator',
+				new Translator(target, that.#languages, target)
+			);
 		}
 
-		onAttributeChanged(ev: typeof McEvent) {
-			let logger = this.target._mc?.logger;
-			//logger?.info("onAttributeChanged handler", ev);
-		}
+		oneInit(ev: McEvent) {
+			let that = this;
 
-		/*
-		native event handlers
-		*/
-		oneClick(ev: typeof McEvent) {
-			let logger = this.target._mc?.logger;
+			// state
+			that.Dom = { counter: 0 };
 
-			logger.info("oneClick handler", ev);
+			// state: convert all props defined so far into observables
+			observe(that);
 
-			this._mc.customEventTarget.trigger("customEvent");
+			// bind Dom to target
+			(that.Dom as Observable).bind(that.target);
 
-			this.target.setAttribute("my-attribute", "testValue");
+			// show
+			setTimeout(() => that.target.removeAttribute('style'), 100);
 		}
 
-		onClick(ev: typeof McEvent) {
-			let logger = this.target._mc?.logger;
-
-			logger?.info("onClick handler", ev);
-
-			this.Counter++;
+		onAttributeChanged(ev: McEvent) {
+			//console.log(ev);
+			this.target._mc.translator.Language = ev.data.newValue;
 		}
 
-		/*
-		DC custom event handlers
-		*/
-		oneInit(ev: typeof McEvent) {
-			let that = this,
-				_mc = that._mc;
-
-			let logger = that.target._mc.logger;
-
-			//logger.warn("oneInit handler", ev);
-
-			// add a private event target
-			_mc.customEventTarget = new EvTarget(that);
-
-			// add a private adder
-			_mc.Adder = new Adder();
-
-			// add callback for this.Counter changes
-			( that.Counter as any).observe((value: number) => {
-				logger.log("Counter has changed to: " + value);
-			});
-
-			//logger.log("add 1,2,3 =", _mc.Adder.sum(1, 2, 3));
-		}
-
-		onDoSomething(ev: typeof McEvent) {
-			let logger = this.target._mc?.logger;
-			logger?.log(".onDoSomething(ev): something done...", ev);
+		onClick(ev: McEvent) {
+			this.Dom.counter++;
+			(this.target as HTMLElement).classList.add('clicked');
 		}
 	},
-	["my-attribute"]
+	['language']
 );
 
-let MyTag: CustomElementConstructor = getCE("my-tag")!,
+let MyTag: CustomElementConstructor = getCE('my-tag')!,
 	fragment = new DocumentFragment();
 
-// stress test
-console.time("Instancing");
-// create 1000 elements
-for ( let x = 0; x < 1000; x ++ ){
-	fragment.append( new MyTag("my-data") );
+/*
+stress test
+*/
+
+let start = new Date().getTime();
+
+// create 100 elements
+for (let x = 0; x < 100; x++) {
+	fragment.append(new MyTag());
 }
-document.body.appendChild( fragment );
 
-console.log(
-	'%c \n\nStress Test:\n\n %cInstancing 1000 classes and putting them in the DOM took (ms):',
-	"font-weight: bold; color: black;",
-	"color: black;"
-);
-console.timeEnd("Instancing");
+let end = new Date().getTime();
 
-document.querySelectorAll('my-tag').forEach( (e) => e.remove() );
+// and put them into the DOM
+document.body.appendChild(fragment);
 
-// and put them into thwe DOM
+//document.querySelectorAll('my-tag').forEach((e) => e.remove());
 
-document.body.appendChild( new MyTag("my-data") );
+/*
+console test
+*/
 
-let element = document.querySelector("my-tag");
+setTimeout(() => {
+	console.clear();
 
-console.log(
-	"\n\n%cInspect this tag:%c \n( ...to see the inner structure in the '._mc' property )\n\n %O %c %s",
-	"font-weight: bold;",
-	"font-weight: normal;",
-	element,
-	"font-weight: bold;",
-	"\n\nLook up code in the debugger: test.js\n\n"
-);
+	console.log(
+		'%c \n\nStress Test:\n\n %cInstancing 100 web components: %c %s ms.',
+		'font-weight: bold; color: black;',
+		'font-weight: normal;',
+		'font-weight: bold; color: blue;',
+		end - start
+	);
+
+	document.body.appendChild(new MyTag());
+
+	let element = document.querySelector('my-tag');
+
+	console.log(
+		"\n\n%cInspect this tag:%c \n( ...to see the inner structure in the '._mc' property )\n\n %O %c %s",
+		'font-weight: bold;',
+		'font-weight: normal;',
+		element,
+		'font-weight: bold;',
+		'\n\nLook up code in the debugger: test.js\n\n'
+	);
 
-// will trigger the event on all micro components contained in <my-tag>
-DC.trigger(element, "doSomething");
+	// will trigger the event on all micro components contained in <my-tag>
+	DC.trigger(element, 'doSomething');
+}, 500);

package/typedoc.json

@@ -1,5 +1,5 @@
 {
-	"entryPoints": ["src/MCbundle.ts","src/MCIbundle.ts","src/MC.ts","src/MCI.ts","src/convenienceobservables.ts","src/formvalues.ts","src/customelements.ts"],
+	"entryPoints": ["src/MC.ts","src/elements.ts","src/observables.ts","src/formValues.ts","src/selectors.ts"],
 	"out": "./public/",
 	"readme": "README.md",
 	"name": "Micro Components",

package/webpack.config.js

@@ -40,13 +40,13 @@ module.exports = [
 		},
 	},
 	{
-		entry: "./build/customElements.js",
+		entry: "./build/elements.js",
 		mode: "production",
 		output: {
 			path: path.resolve(__dirname, "dist"),
-			filename: "customElements.min.js",
+			filename: "elements.min.js",
 			libraryTarget: "umd",
-			library: "customElements",
+			library: "elements",
 			globalObject: "this",
 		},
 		module: {
@@ -78,13 +78,13 @@ module.exports = [
 		},
 	},
 	{
-		entry: "./build/customSelectors.js",
+		entry: "./build/selectors.js",
 		mode: "production",
 		output: {
 			path: path.resolve(__dirname, "dist"),
-			filename: "customSelectors.min.js",
+			filename: "selectors.min.js",
 			libraryTarget: "umd",
-			library: "customSelectors",
+			library: "selectors",
 			globalObject: "this",
 		},
 		module: {
@@ -154,13 +154,13 @@ module.exports = [
 		},
 	},
 	{
-		entry: "./build/customObservables.js",
+		entry: "./build/observables.js",
 		mode: "production",
 		output: {
 			path: path.resolve(__dirname, "dist"),
-			filename: "customObservables.min.js",
+			filename: "observables.min.js",
 			libraryTarget: "umd",
-			library: "customObservables",
+			library: "observables",
 			globalObject: "this",
 		},
 		module: {

package/dist/customElements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"customElements.d.ts","sourceRoot":"","sources":["../src/customElements.ts"],"names":[],"mappings":"AA+BA,wBAAgB,QAAQ,CAAE,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE;IAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,EAAE,kBAAkB,GAAE,MAAM,EAAO,QA+B3H;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,wBAAwB,GAAG,SAAS,CAE3E"}

package/dist/customElements.min.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.customElements=t():e.customElements=t()}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},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={};e.r(t),e.d(t,{defineCE:()=>h,getCE:()=>y});var r=new Function("try {return this===window;}catch(e){ return false;}");let n=new Set;r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>n.add(e)));class o{#e;#t=!1;#r=!1;constructor(e,t={},r="l"){this.#e=e,this.data=t,this.bubble=r}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#r}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#r=!0}}var i=new Function("try {return this===window;}catch(e){ return false;}");let c=new Set;function s(e,t){let r=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const n=e?._mc;!t&&n?r=r.concat(Object.values(e._mc)):t&&n&&n[t]&&r.push(n[t])}})),r}function a(e,t,r=!0){let n=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&n.push(e._mc[t]):n=n.concat(Object.values(e._mc)),r))return n;e=e.parentNode}return n}function u(e){return e&&e instanceof HTMLElement}function l(e,t,r={}){let n=e;if(!n._mc){let t=g?.debug;g.debug=!1,n._mc=new g(e),g.debug=t,delete n._mc._mc}const o=n._mc;return t.length&&!o[t]&&(o[t]=r,e instanceof HTMLElement&&e.setAttribute("_mc","")),r}function d(e,t){if(!t)return;const r=e?._mc||{};r&&r[t]&&delete r[t],!Object.keys(r).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,r={}){let n=e?._mc;n&&[...Object.values(n)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(t,r)}))}i()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>c.add(e)));class f{#n;constructor(e){var t;this.#n=new WeakRef(e||{}),(t=this).constructor!==g&&setTimeout((()=>{t.trigger("Init"),setTimeout((()=>{let e=Object.keys(t?._mc);e.length&&e?.forEach((e=>{let r=t?._mc?.[e];r.oneInit&&"function"==typeof r.oneInit&&r.oneInit(new o("Init"))}))}),0)}),0),function(e){if(!i()||e.constructor===g)return;const t=e.target;if(t instanceof HTMLElement){let r=e;Object.getOwnPropertyNames(r.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof r.constructor.prototype[e])).forEach((n=>{let o=/^one/.test(n),i=n.replace(/^on[e]{0,1}/,""),s=i.toLowerCase();o&&Object.defineProperty(e,"on"+i,{configurable:!0,enumerable:!1,writable:!0,value:e=>{r.constructor.prototype[n].bind(r)(e)}}),c.has("on"+s)&&function(e,t,r,n=!1,o=!1){let i={once:!1};n&&(i.capture=n),o&&(i.once=o),e.addEventListener(t,r,i)}(t,s,(e=>{r.trigger(i,e)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class m extends f{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},r){let n=this;if(r=r||"l",n.constructor!==m&&n.constructor!==g){if(n instanceof m||n instanceof g){const n=this,c="string"!=typeof e?e:new o(e,t,r),s="on"+c.type[0].toUpperCase()+c.type.slice(1);if(c.bubble.indexOf("l")>-1&&(c.immediateStopped||"function"!=typeof n[s]||(n[s](c),n.hasOwnProperty(s)&&delete n[s])),c.stopped||"l"===c.bubble)return n;i()&&/[ud]/.test(c.bubble)&&n instanceof m&&setTimeout((()=>{-1===c.bubble.indexOf("l")&&(c.bubble+="l"),c.bubble.indexOf("u")>-1&&n.parent().forEach((e=>{e instanceof m&&e.trigger(c)})),c.bubble.indexOf("d")>-1&&n.children().forEach((e=>{e instanceof m&&e.trigger(c)}))}),0)}}else[...Object.getOwnPropertyNames(n)].forEach((o=>{n[o]?.trigger&&"function"==typeof n[o]?.trigger&&n[o]?.trigger(e,t,r)}))}}class g extends f{_mc={};constructor(e){super(e)}static debug=!1;static add=l;static remove=d;static trigger=p;trigger(e,t={},r){m.prototype.trigger.call(this,e,t,r)}parent(e=""){let t=this.target;return u(t)?a(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return u(t)?a(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!u(t))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';t.setAttribute("temp_id",r);const o=s([...t.querySelectorAll(n)],e);return t.removeAttribute("temp_id"),o}descendants(e=""){let t=this?.target;return u(t)?s([...t.querySelectorAll("*[_mc]")],e):[]}}class b extends HTMLElement{constructor(){super()}connectedCallback(){g.trigger(this,"Connected")}disconnectedCallback(){g.trigger(this,"Disconnected")}adoptedCallback(){g.trigger(this,"Adopted")}attributeChangedCallback(e,t,r){g.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:r})}}function h(e,t,r=[]){if(customElements.get(e))return void console.warn(`IGNORED: Custom element "${e}" is already defined!`);if(!e.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let n=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(n,class extends b{instance;constructor(e){super();let r=new t(this,e);g.add(this,n,r)}static get observedAttributes(){return r}}))}function y(e){return customElements.get(e)}return t})()));

package/dist/customObservables.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"customObservables.d.ts","sourceRoot":"","sources":["../src/customObservables.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,eAAO,MAAM,OAAO,WAAa,WAAW,iBAAiB,MAAM,SA8UlE,CAAA;AAED,KAAK,QAAQ,GAAG,CAAE,KAAK,EAAE,GAAG,KAAM,IAAI,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG;IACrB,OAAO,EAAE,CAAC,EAAE,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,UAAU,KAAK,IAAI,CAAC;CACpD,CAAC"}

package/dist/customObservables.min.js

@@ -1 +0,0 @@
-!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,{observe:()=>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})()));