@twobirds/microcomponents 0.1.18 → 0.1.20

package/dist/MC.d.ts.map

@@ -1 +1 @@
-{"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;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA+DD,iBAAS,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAEzF;AAED,iBAAS,EAAE,CACV,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,EAC3C,IAAI,GAAE,OAAe,GACnB,kCAAkC,CAGpC;AAED,iBAAS,GAAG,CACX,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC,CAGpC;AAED,cAAM,gBAAgB;IACrB,OAAO,UAAS;;IAEhB,IAAI;CAGJ;AAGD,iBAAS,OAAO,CACf,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,MAAM,EACb,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,EACpB,UAAU,CAAC,EAAE,gBAAgB,QA8C7B;AAiDD,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;IAU3C,IAAI,MAAM,IAAI,GAAG,CAEhB;CACD;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;CAGxB;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,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,CACD,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC;IAIrC,GAAG,CACF,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC;IAIrC,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY,EAAE,UAAU,CAAC,EAAE,gBAAgB;IAK9F,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;CAQ1B;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"}
+{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AAkED,iBAAS,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAEzF;AAED,iBAAS,EAAE,CACV,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,EAC3C,IAAI,GAAE,OAAe,GACnB,kCAAkC,CAGpC;AAED,iBAAS,GAAG,CACX,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC,CAGpC;AAED,cAAM,gBAAgB;IACrB,OAAO,UAAS;;IAEhB,IAAI;CAGJ;AAGD,iBAAS,OAAO,CACf,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,MAAM,EACb,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,EACpB,UAAU,CAAC,EAAE,gBAAgB,QA8C7B;AAiDD,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE;IAY3C,IAAI,MAAM,IAAI,GAAG,CAEhB;CACD;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;CAGxB;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW;IAK/B,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,GAAQ,GAAG,aAAa;IAK9E,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM;IAK9C,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,EAAE,CACD,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC;IAIrC,GAAG,CACF,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GACzC,kCAAkC;IAIrC,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY,EAAE,UAAU,CAAC,EAAE,gBAAgB;IAO9F,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;CAQ1B;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.ts

@@ -32,6 +32,8 @@ function add(target: HTMLElement, key: string, element: any = {}): HTMLMcElement
 		}
 	}
 
+	//console.warn('add() args: target, key, element', arguments, node);
+
 	return node;
 }
 
@@ -55,6 +57,7 @@ function remove(target: HTMLElement, key: string) {
 
 // run the "init" lifecycle event on the complete _mc structure
 function init(element: DC) {
+	//console.warn('init(): args', ...arguments);
 	setTimeout(() => {
 		if (element.constructor === DC) return;
 		element.trigger('Init');
@@ -108,6 +111,8 @@ function trigger(
 	bubble: string = 'l', // direction of bubbling
 	controller?: BubbleController
 ) {
+	//console.warn('trigger args', ...arguments);
+
 	const eventName = /^_mc/.test(event) ? event : getMcEventName(event),
 		bubbleController = controller ? controller : new BubbleController(),
 		ev = new CustomEvent(eventName, {
@@ -126,8 +131,6 @@ function trigger(
 
 	// bubble if up or down is indicated
 	if (/[ud]/.test(bubble)) {
-		//console.log( 'bubble', bubble, domNode );
-
 		// add missing 'l', or else no handlers are executed
 		if (bubble.indexOf('l') === -1) {
 			bubble += 'l';
@@ -209,6 +212,8 @@ class McBase {
 
 		this._target = new WeakRef(target || {});
 
+		//console.warn('McBase: this, element, args', target, this, element, arguments);
+
 		autoAttachListeners(element);
 
 		init(element as DC); // async lifecycle event
@@ -228,9 +233,11 @@ class MC extends McBase {
 class DC extends McBase {
 	constructor(target: HTMLElement) {
 		super(target);
+		//console.warn('DC constructor:', arguments);
 	}
 
 	static add(target: HTMLElement, key: string, element: any = {}): HTMLMcElement {
+		//console.warn('static DC.add() args', arguments);
 		return add(target, key, element);
 	}
 
@@ -258,6 +265,8 @@ class DC extends McBase {
 	}
 
 	trigger(eventName: string, data: any = {}, bubble: string = 'l', controller?: BubbleController) {
+		//console.warn('MC.trigger args', ...arguments, this);
+
 		trigger(this.target, eventName, data, bubble, controller);
 	}
 
@@ -310,7 +319,7 @@ function attachDC(element: string): Function {
 	return () => {
 		const elements: HTMLElement[] = Array.from(
 			document.querySelectorAll(`[data-mc*="${element}"]`)
-		).filter((element) => element instanceof HTMLElement);
+		).filter((element) => element instanceof HTMLElement) as HTMLElement[];
 
 		if (elements.length === 0) return;
 

package/dist/elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AA6CA,wBAAgB,QAAQ,CACvB,OAAO,EAAE,MAAM,EACf,eAAe,EAAE;IAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,GAAG,QAAQ,EACzD,kBAAkB,GAAE,MAAM,EAAO,QAyDjC;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,wBAAwB,GAAG,SAAS,CAE3E"}
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["elements.ts"],"names":[],"mappings":"AASA,wBAAgB,QAAQ,CACvB,OAAO,EAAE,MAAM,EACf,eAAe,EAAE;IAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,GAAG,QAAQ,EACzD,kBAAkB,GAAE,MAAM,EAAO,QA6EjC;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,wBAAwB,GAAG,SAAS,CAE3E"}

package/dist/elements.js

@@ -1,35 +1,9 @@
 'use strict';
 import { DC, McBase } from './MC.js';
 import { kebabToPascal } from './helpers.js';
-class CeBaseClass extends HTMLElement {
-    constructor() {
-        super();
-    }
-    connectedCallback() {
-        this.dispatchEvent(new CustomEvent('_mcConnected'));
-    }
-    connectedMoveCallback() {
-        this.dispatchEvent(new CustomEvent('_mcConnectedMove'));
-    }
-    disconnectedCallback() {
-        this.dispatchEvent(new CustomEvent('_mcDisconnected'));
-    }
-    adoptedCallback() {
-        this.dispatchEvent(new CustomEvent('_mcAdopted'));
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        this.dispatchEvent(new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } }));
-    }
-    formResetCallback() {
-        this.dispatchEvent(new CustomEvent('_mcFormReset'));
-    }
-}
 function createNamedClass(name, ClassBody) {
     return Object.defineProperty(ClassBody, 'name', { value: name });
 }
-function isClass(func) {
-    return typeof func === 'function' && /^class\s/.test(Function.prototype.toString.call(func));
-}
 export function defineCE(tagName, DefinitionClass, observedAttributes = []) {
     if (customElements.get(tagName)) {
         console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
@@ -39,23 +13,32 @@ export function defineCE(tagName, DefinitionClass, observedAttributes = []) {
         throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');
     }
     let name = kebabToPascal(tagName);
-    if (!isClass(DefinitionClass.prototype.constructor)) {
-        customElements.define(tagName, DefinitionClass);
-        return;
-    }
     if (!(DefinitionClass.prototype instanceof McBase)) {
         customElements.define(tagName, DefinitionClass);
         return;
     }
-    customElements.define(tagName, createNamedClass(name, class extends CeBaseClass {
-        instance;
+    customElements.define(tagName, createNamedClass(name, class extends HTMLElement {
         constructor(data) {
             super();
-            const instance = isClass(DefinitionClass)
-                ?
-                    new DefinitionClass(this, data)
-                : DefinitionClass;
-            DC.add(this, name, instance);
+            DC.add(this, name, new DefinitionClass(this, data));
+        }
+        connectedCallback() {
+            this.dispatchEvent(new CustomEvent('_mcConnected'));
+        }
+        connectedMoveCallback() {
+            this.dispatchEvent(new CustomEvent('_mcConnectedMove'));
+        }
+        disconnectedCallback() {
+            this.dispatchEvent(new CustomEvent('_mcDisconnected'));
+        }
+        adoptedCallback() {
+            this.dispatchEvent(new CustomEvent('_mcAdopted'));
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            this.dispatchEvent(new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } }));
+        }
+        formResetCallback() {
+            this.dispatchEvent(new CustomEvent('_mcFormReset'));
         }
         static get observedAttributes() {
             return observedAttributes;

package/dist/elements.min.js

@@ -1 +1 @@
-var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{c:()=>d,t:()=>m});const n=new Function("try {return this===window;}catch(e){ return false;}");function r(t){return t&&t instanceof HTMLElement}function c(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function o(t,e,n,r=!1){return t.addEventListener(c(e),n,{capture:!1,once:r}),n}class s{stopped=!1;constructor(){}stop(){this.stopped=!0}}class a{_target;constructor(t){var e;this._target=new WeakRef(t||{}),function(t){if(!n()||t.constructor===i)return;const e=t.target;if(e instanceof HTMLElement){let n=t;Object.getOwnPropertyNames(n.constructor.prototype).filter((t=>/^(on[A-Z]|one[A-Z])/.test(t)&&"function"==typeof n.constructor.prototype[t])).forEach((t=>{let r=/^one/.test(t),c=t.replace(/^on[e]{0,1}/,""),s=c.toLowerCase();if("on"+s in e){let r=e=>{n[t](e)};e.addEventListener(s,r)}else o(e,c,(e=>{n[t](e)}),r)}))}}(this),e=this,setTimeout((()=>{e.constructor!==i&&e.trigger("Init")}),0)}get target(){return this._target.deref()}}class i extends a{constructor(t){super(t)}static add(t,e,n={}){return function(t,e,n={}){let r=t;r._mc||(r._mc=new i(t));const c=r._mc;return e.length&&!c[e]&&(c[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}(t,e,n)}static remove(t,e){!function(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}(t,e)}off(t,e){!function(t,e,n){t.removeEventListener(c(e),n)}(this.target,t,e)}on(t,e){return o(this.target,t,e)}one(t,e){return function(t,e,n){return o(t,e,n,!0),n}(this.target,t,e)}trigger(t,e={},n="l",r){!function(t,e,n={},r="l",o){const a=/^_mc/.test(e)?e:c(e),i=o||new s,l=new CustomEvent(a,{detail:{data:n,control:i},bubbles:!1});i.stopped||/l/.test(r)&&(t.dispatchEvent(l),l.stopImmediatePropagation(),i.stopped)||/[ud]/.test(r)&&(-1===r.indexOf("l")&&(r+="l"),setTimeout((()=>{if(r.indexOf("u")>-1){let e=t.parentElement?.closest("[data-mc]");e&&e?._mc.trigger(a,n,r,i)}if(r.indexOf("d")>-1){let e=t._mc.children();e&&e.forEach((t=>t.trigger(a,n,r)))}}),0))}(this.target,t,e,n,r)}ancestors(){let t=this?.target,e=[];if(!r(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 r(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return r(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!r(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}new Set;class l extends HTMLElement{constructor(){super()}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function u(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}function d(t,e,n=[]){if(customElements.get(t))return void console.warn(`IGNORED: Custom element "${t}" is already defined!`);if(!t.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("");u(e.prototype.constructor)&&e.prototype instanceof a?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends l{instance;constructor(t){super();const n=u(e)?new e(this,t):e;i.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function m(t){return customElements.get(t)}var p=e.c,f=e.t;export{p as defineCE,f as getCE};
+var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{c:()=>l,t:()=>u});const n=new Function("try {return this===window;}catch(e){ return false;}");function r(t){return t&&t instanceof HTMLElement}function c(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function o(t,e,n,r=!1){return t.addEventListener(c(e),n,{capture:!1,once:r}),n}class s{stopped=!1;constructor(){}stop(){this.stopped=!0}}class a{_target;constructor(t){var e;this._target=new WeakRef(t||{}),function(t){if(!n()||t.constructor===i)return;const e=t.target;if(e instanceof HTMLElement){let n=t;Object.getOwnPropertyNames(n.constructor.prototype).filter((t=>/^(on[A-Z]|one[A-Z])/.test(t)&&"function"==typeof n.constructor.prototype[t])).forEach((t=>{let r=/^one/.test(t),c=t.replace(/^on[e]{0,1}/,""),s=c.toLowerCase();if("on"+s in e){let r=e=>{n[t](e)};e.addEventListener(s,r)}else o(e,c,(e=>{n[t](e)}),r)}))}}(this),e=this,setTimeout((()=>{e.constructor!==i&&e.trigger("Init")}),0)}get target(){return this._target.deref()}}class i extends a{constructor(t){super(t)}static add(t,e,n={}){return function(t,e,n={}){let r=t;r._mc||(r._mc=new i(t));const c=r._mc;return e.length&&!c[e]&&(c[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}(t,e,n)}static remove(t,e){!function(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}(t,e)}off(t,e){!function(t,e,n){t.removeEventListener(c(e),n)}(this.target,t,e)}on(t,e){return o(this.target,t,e)}one(t,e){return function(t,e,n){return o(t,e,n,!0),n}(this.target,t,e)}trigger(t,e={},n="l",r){!function(t,e,n={},r="l",o){const a=/^_mc/.test(e)?e:c(e),i=o||new s,l=new CustomEvent(a,{detail:{data:n,control:i},bubbles:!1});i.stopped||/l/.test(r)&&(t.dispatchEvent(l),l.stopImmediatePropagation(),i.stopped)||/[ud]/.test(r)&&(-1===r.indexOf("l")&&(r+="l"),setTimeout((()=>{if(r.indexOf("u")>-1){let e=t.parentElement?.closest("[data-mc]");e&&e?._mc.trigger(a,n,r,i)}if(r.indexOf("d")>-1){let e=t._mc.children();e&&e.forEach((t=>t.trigger(a,n,r)))}}),0))}(this.target,t,e,n,r)}ancestors(){let t=this?.target,e=[];if(!r(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 r(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return r(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!r(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}function l(t,e,n=[]){if(customElements.get(t))return void console.warn(`IGNORED: Custom element "${t}" is already defined!`);if(!t.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("");e.prototype instanceof a?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends HTMLElement{constructor(t){super(),i.add(this,r,new e(this,t))}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}static get observedAttributes(){return n}})):customElements.define(t,e)}function u(t){return customElements.get(t)}new Set;var m=e.c,d=e.t;export{m as defineCE,d as getCE};

package/dist/elements.ts

@@ -3,51 +3,17 @@
 import { DC, McBase } from './MC.js';
 import { kebabToPascal } from './helpers.js';
 
-class CeBaseClass extends HTMLElement {
-	constructor() {
-		super();
-	}
-
-	connectedCallback() {
-		this.dispatchEvent(new CustomEvent('_mcConnected'));
-	}
-
-	connectedMoveCallback() {
-		this.dispatchEvent(new CustomEvent('_mcConnectedMove'));
-	}
-
-	disconnectedCallback() {
-		this.dispatchEvent(new CustomEvent('_mcDisconnected'));
-	}
-
-	adoptedCallback() {
-		this.dispatchEvent(new CustomEvent('_mcAdopted'));
-	}
-
-	attributeChangedCallback(name: string, oldValue: any, newValue: any) {
-		this.dispatchEvent(
-			new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } })
-		);
-	}
-
-	formResetCallback() {
-		this.dispatchEvent(new CustomEvent('_mcFormReset'));
-	}
-}
-
 function createNamedClass(name: string, ClassBody: { new (...args: any[]): any }) {
 	return Object.defineProperty(ClassBody, 'name', { value: name });
 }
 
-function isClass(func: any) {
-	return typeof func === 'function' && /^class\s/.test(Function.prototype.toString.call(func));
-}
-
 export function defineCE(
 	tagName: string,
 	DefinitionClass: { new (...args: any[]): any } | Function,
 	observedAttributes: string[] = []
 ) {
+	//console.warn('defineCE args', arguments);
+
 	if (customElements.get(tagName)) {
 		console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
 		return;
@@ -59,18 +25,9 @@ export function defineCE(
 
 	let name = kebabToPascal(tagName);
 
-	// not a class, but a pure function
-	if (!isClass(DefinitionClass.prototype.constructor)) {
-		customElements.define(
-			tagName,
-			// @ts-ignore
-			DefinitionClass
-		);
-		return;
-	}
-
 	// a class, but not a MC
 	if (!(DefinitionClass.prototype instanceof McBase)) {
+		//console.warn('pure class', tagName, DefinitionClass);
 		customElements.define(
 			tagName,
 			// @ts-ignore
@@ -79,22 +36,49 @@ export function defineCE(
 		return;
 	}
 
+	//console.warn('MC class', tagName, DefinitionClass);
 	// a MC
 	customElements.define(
 		tagName,
 		createNamedClass(
 			name,
-			class extends CeBaseClass {
-				instance: any;
-
+			class extends HTMLElement {
 				constructor(data?: any) {
 					super();
+					// console.log('[named class constructor]', tagName, name, this, data);
 					// @ts-ignore
-					const instance = isClass(DefinitionClass)
-						? // @ts-ignore
-							new DefinitionClass(this, data)
-						: DefinitionClass;
-					DC.add(this, name, instance);
+					DC.add(this, name, new DefinitionClass(this, data));
+				}
+
+				connectedCallback() {
+					//console.warn('onConnected', this);
+					this.dispatchEvent(new CustomEvent('_mcConnected'));
+				}
+
+				connectedMoveCallback() {
+					//console.warn('onConnectedMove', this);
+					this.dispatchEvent(new CustomEvent('_mcConnectedMove'));
+				}
+
+				disconnectedCallback() {
+					//console.warn('onDisconnected', this);
+					this.dispatchEvent(new CustomEvent('_mcDisconnected'));
+				}
+
+				adoptedCallback() {
+					//console.warn('onAdopted', this);
+					this.dispatchEvent(new CustomEvent('_mcAdopted'));
+				}
+
+				attributeChangedCallback(name: string, oldValue: any, newValue: any) {
+					//console.warn('onAttributeChanged', this);
+					this.dispatchEvent(
+						new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } })
+					);
+				}
+
+				formResetCallback() {
+					this.dispatchEvent(new CustomEvent('_mcFormReset'));
 				}
 
 				static get observedAttributes() {

package/dist/formValues.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../src/formValues.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAsB,MAAM,cAAc,CAAC;AA6L/D,wBAAgB,UAAU,CACzB,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,WAAW,GAAG,UAAU,QAkB7B"}
+{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["formValues.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAsB,MAAM,cAAc,CAAC;AA6L/D,wBAAgB,UAAU,CACzB,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,WAAW,GAAG,UAAU,QAkB7B"}

package/dist/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CAElD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,WAAW,GAAG,WAAW,CAatD;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,GAAE,OAAc,GAAG,WAAW,CAgBjF;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,GAAG,OAAO,CAEnE;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,GAAE,WAAgB,GAAG,GAAG,CAW3E;AAED,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,EAAE,SAAS,EAAE,MAAM,OAsCrE;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,GAAG,QAAQ,CASvE;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1D;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,QAO1E"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["helpers.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;CAC5B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,OAAO,CAElD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,WAAW,GAAG,WAAW,CAatD;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,GAAE,OAAc,GAAG,WAAW,CAgBjF;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,GAAG,OAAO,CAEnE;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,GAAE,WAAgB,GAAG,GAAG,CAW3E;AAED,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,EAAE,SAAS,EAAE,MAAM,OAsCrE;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,GAAG,QAAQ,CASvE;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1D;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,QAO1E"}

package/dist/microcomponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"microcomponents.d.ts","sourceRoot":"","sources":["../src/microcomponents.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"microcomponents.d.ts","sourceRoot":"","sources":["microcomponents.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC"}

package/dist/microcomponents.min.js

@@ -1 +1 @@
-var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function n(t){return t&&t.constructor&&t.constructor===Object}function r(t){let e={};return[...Object.keys(t)].sort().forEach((s=>{n(t[s])?e[s]=r(t[s]):e[s]=t[s]})),e}function s(t,e=!0){let n={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]instanceof Object){const r=s(t[e],!1);n[e]={};for(const t in r)n[e+"."+t]=r[t]}else n[e]=t[e]})),e?r(n):n}function a(t,e){return JSON.stringify(s(t))===JSON.stringify(s(e))}function c(t,e={}){let n=t.constructor===String?t.split("."):t;if(e&&n[0]&&e[n[0]])return e[n[0]].constructor===Object&&n.length>1?c(n.splice(1),e[n[0]]):e[n[0]];console.warn("ns",n[0],"not in",e)}function o(t,e){var r=Array.from(arguments);if(r.length>2){for(;r.length>1;)r[0]=o(r[0],r[1]),r.splice(1,1);return r[0]}if("string"==typeof t)t.match(/\{[^\{\}]*\}/g)?.forEach((function(n){var r=c(n.substring(1,n.length-1),e);void 0!==r&&(t=t.replace(n,r))}));else if(n(t))switch(t.constructor){case Object:Object.keys(t).forEach((function(n){t.hasOwnProperty(n)&&(t[n]=o(t[n],e))}));break;case Array:t.forEach((function(n,r,s){s[r]=o(t[r],e)}))}return t}function i(t){return t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("")}function l(t,e){let n;return()=>{clearTimeout(n),n=setTimeout((function(){t(...arguments)}),e)}}function u(t){let e=document.createElement("template");return t=t.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,"<$1$2></$1>"),e.innerHTML=t,e.content.normalize(),Array.from(e.content.childNodes)}function d(t,e){const n=Object.getOwnPropertyDescriptors(t);for(const[t,r]of Object.entries(n))("get"in r||"set"in r)&&Object.defineProperty(e,t,r)}t.d(e,{DC:()=>w,MC:()=>O,Oc:()=>E,E_:()=>N,IT:()=>d,sg:()=>l,bD:()=>a,c2:()=>x,YO:()=>s,Rc:()=>U,tn:()=>D,qS:()=>u,nz:()=>n,TK:()=>i,k5:()=>c,lB:()=>R,AU:()=>p,on:()=>g,xH:()=>b,qg:()=>o,mf:()=>r,hZ:()=>v});const f=new Function("try {return this===window;}catch(e){ return false;}");function h(t){return t&&t instanceof HTMLElement}function m(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function p(t,e,n){t.removeEventListener(m(e),n)}function g(t,e,n,r=!1){return t.addEventListener(m(e),n,{capture:!1,once:r}),n}function b(t,e,n){return g(t,e,n,!0),n}class y{stopped=!1;constructor(){}stop(){this.stopped=!0}}function v(t,e,n={},r="l",s){const a=/^_mc/.test(e)?e:m(e),c=s||new y,o=new CustomEvent(a,{detail:{data:n,control:c},bubbles:!1});c.stopped||/l/.test(r)&&(t.dispatchEvent(o),o.stopImmediatePropagation(),c.stopped)||/[ud]/.test(r)&&(-1===r.indexOf("l")&&(r+="l"),setTimeout((()=>{if(r.indexOf("u")>-1){let e=t.parentElement?.closest("[data-mc]");e&&e?._mc.trigger(a,n,r,c)}if(r.indexOf("d")>-1){let e=t._mc.children();e&&e.forEach((t=>t.trigger(a,n,r)))}}),0))}class E{_target;constructor(t){var e;this._target=new WeakRef(t||{}),function(t){if(!f()||t.constructor===w)return;const e=t.target;if(e instanceof HTMLElement){let n=t;Object.getOwnPropertyNames(n.constructor.prototype).filter((t=>/^(on[A-Z]|one[A-Z])/.test(t)&&"function"==typeof n.constructor.prototype[t])).forEach((t=>{let r=/^one/.test(t),s=t.replace(/^on[e]{0,1}/,""),a=s.toLowerCase();if("on"+a in e){let r=e=>{n[t](e)};e.addEventListener(a,r)}else g(e,s,(e=>{n[t](e)}),r)}))}}(this),e=this,setTimeout((()=>{e.constructor!==w&&e.trigger("Init")}),0)}get target(){return this._target.deref()}}class O extends E{constructor(t){super(t)}}class w extends E{constructor(t){super(t)}static add(t,e,n={}){return function(t,e,n={}){let r=t;r._mc||(r._mc=new w(t));const s=r._mc;return e.length&&!s[e]&&(s[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}(t,e,n)}static remove(t,e){!function(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}(t,e)}off(t,e){p(this.target,t,e)}on(t,e){return g(this.target,t,e)}one(t,e){return b(this.target,t,e)}trigger(t,e={},n="l",r){v(this.target,t,e,n,r)}ancestors(){let t=this?.target,e=[];if(!h(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 h(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return h(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!h(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}const A=new Set;function C(t){return()=>{const e=Array.from(document.querySelectorAll(`[data-mc*="${t}"]`)).filter((t=>t instanceof HTMLElement));if(0===e.length)return;const n=customElements.get(t);e.forEach((e=>{try{w.add(e,n.name,new n(e))}catch(t){if(!n.create)throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`;{let t=n.create(e);t.setAttribute("data-mc",e.getAttribute("data-mc")),e.replaceWith(t),e=t}}const r=e.getAttribute("data-mc").split(" ").filter((e=>e!==t&&""!==e)).join(" ").trim();e.setAttribute("data-mc",r)}))}}function k(t){if(A.has(t))return;A.add(t);const e="./"+t.split("-").join("/")+".js",n=document.createElement("script");n.setAttribute("src",e),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("data-name",t),n.setAttribute("loading",""),customElements.whenDefined(t).then(C(t)),n.addEventListener("load",(e=>{A.delete(t),document.head.querySelector(`script[data-name="${t}"]`)?.remove()})),n.addEventListener("error",(t=>{console.error("could not load DC code from",e)})),document.head.append(n)}function j(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!A.has(t.tagName.toLowerCase()))).forEach((t=>{k(t.tagName.toLowerCase())})),[...document.querySelectorAll('[data-mc]:not([data-mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("data-mc")?.split(" ").filter((t=>""!==t));e?.forEach((t=>{const e=customElements.get(t);A.has(t)||e?e&&C(t)():k(t)}))}))}let _=!1,S=null;function N(t=!0){return t?(_=t,S=new MutationObserver(j),setTimeout((()=>{S.observe(document.body,{childList:!0,subtree:!0}),j()}),5),window.autoload=window.autoload||N,_):(S?.disconnect(),S=null,_)}N.state=A;class T extends HTMLElement{constructor(){super()}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function L(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}function x(t,e,n=[]){if(customElements.get(t))return void console.warn(`IGNORED: Custom element "${t}" is already defined!`);if(!t.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=i(t);L(e.prototype.constructor)&&e.prototype instanceof E?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends T{instance;constructor(t){super();const n=L(e)?new e(this,t):e;w.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function D(t){return customElements.get(t)}function M(t){return null!=t&&"object"==typeof t}function q(t){let e=new Set,n=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(n))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(n));r.forEach((t=>r.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(n))).forEach((t=>{(t.nodeValue||"").match(n).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}const P=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class H extends w{data={};oldDisplay="";constructor(t){super(t),q(t).forEach((t=>this.data[t]="")),R(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var r;this.data.observe((r=t.getAttribute(e),s=>{let a=r;n.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,a)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{e=!0;let r=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>s=>{let a=e;r.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,n.nodeValue=a})(n.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((n=>{this.data.hasOwnProperty(n)&&(e[n]=t.detail.data[n])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const I={};function V(t){let e=t.constructor.name;return I[e]||function(t){const e=t.constructor,n=e.name;let r=class extends e{#e=!0;#n=[];constructor(t){super(t),this.constructor.callbacks=[],M(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#n}set callbacks(t){this.#n=t}observe(t){return this.#n.push(t),this}bind(t){if(M(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!q(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||w.add(t,"_placeholders",new H(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),n=function(t){let n=s(t);e.forEach((t=>{t&&v(t,"data",n)}))};this.#n.push(n),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=M(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#e&&this.#n.forEach((t=>{t(e)})),this}};return I[n]=r,r}(t)}const R=(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 n=t[e],r=new(V(n))(n),s=l((function(){r.notify()}),0);Object.defineProperty(t,e,{enumerable:!0,get(){if(M(r.valueOf())){let t=structuredClone(Object.assign({},r));setTimeout((function(){a(structuredClone(Object.assign({},r)),t)||s()}),0)}return r},set(t){if(typeof t==typeof r.valueOf())if(M(r.valueOf())&&r.valueOf()instanceof Array==0)void 0===r?.constructor?.prototype?.observe&&(r=new(V(t))(structuredClone(Object.assign({},t))),d(t,r)),Object.assign(r,t),r.notify();else{let e=r.valueOf(),n=r.callbacks;t!==e&&(r=new(V(t))(t),r.callbacks=n,s())}else console.warn("IGNORED - cannot change observable types, IS:",typeof r.valueOf(),r,"- CANNOT BECOME:",typeof t)}}),t[e]=n}})),t);class ${constructor(t){}}class F extends ${#r;constructor(t){super(t),this.#r=t}get val(){return new FormData(this.#r.form).get(this.#r.name)}set val(t){[...this.#r.form.querySelectorAll(`input[type="radio"][name="${this.#r.name}"]`)].filter((e=>e.getAttribute("value")===t)).shift().checked=!0}}class Z extends ${#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.checked}set val(t){this.#r.checked=t}}class z extends ${#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.value}set val(t){this.#r.value=t}}class B extends ${#r;#s=!1;constructor(t){super(t),this.#r=t,this.#s=t.multiple}get val(){const t=[];return[...this.#r.querySelectorAll("option")].filter((t=>t.selected)).forEach((e=>{t.push(e.value)})),this.#s?t:t.length?t[0]:""}set val(t){t="string"==typeof t?[t]:t,[...this.#r.querySelectorAll("option")].forEach((e=>{t.indexOf(e.value)>-1?e.selected=!0:e.selected=!1}))}}class G extends ${#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.value||""}set val(t){this.#r.value=t}}const J=t=>{let e=[...(t||document).querySelectorAll("input,select,textarea")],n={};return e.forEach((t=>{const e=t.getAttribute("name");if(e){let r=!1;switch((t=>t.tagName.toLowerCase())(t)){case"input":switch(t.type){case"radio":r=new F(t);break;case"checkbox":r=new Z(t);break;default:r=new z(t)}break;case"select":r=new B(t);break;case"textarea":r=new G(t);break;default:console.warn("handler missing:",e,"for",t.tagName.toLowerCase(),t)}r&&(w.add(t,e,r),Object.defineProperty(n,e,{enumerable:!0,configurable:!0,get:()=>r.val,set:t=>{r.val!==t&&(r.val=t)}}))}})),n};function U(t,e,n){let r=J(n);t[e]=Object.assign({},r),R(t,e),d(r,t[e]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{n.addEventListener("input",(n=>{t[e].notify()}))}))}var Y=e.DC,K=e.MC,W=e.Oc,Q=e.E_,X=e.IT,tt=e.sg,et=e.bD,nt=e.c2,rt=e.YO,st=e.Rc,at=e.tn,ct=e.qS,ot=e.nz,it=e.TK,lt=e.k5,ut=e.lB,dt=e.AU,ft=e.on,ht=e.xH,mt=e.qg,pt=e.mf,gt=e.hZ;export{Y as DC,K as MC,W as McBase,Q as autoload,X as copyGettersSetters,tt as debounce,et as deepEqual,nt as defineCE,rt as flattenObject,st as formValues,at as getCE,ct as htmlToElements,ot as isNativeObject,it as kebabToPascal,lt as nameSpace,ut as observe,dt as off,ft as on,ht as one,mt as parse,pt as sortObject,gt as trigger};
+var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function n(t){return t&&t.constructor&&t.constructor===Object}function r(t){let e={};return[...Object.keys(t)].sort().forEach((a=>{n(t[a])?e[a]=r(t[a]):e[a]=t[a]})),e}function a(t,e=!0){let n={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]instanceof Object){const r=a(t[e],!1);n[e]={};for(const t in r)n[e+"."+t]=r[t]}else n[e]=t[e]})),e?r(n):n}function s(t,e){return JSON.stringify(a(t))===JSON.stringify(a(e))}function c(t,e={}){let n=t.constructor===String?t.split("."):t;if(e&&n[0]&&e[n[0]])return e[n[0]].constructor===Object&&n.length>1?c(n.splice(1),e[n[0]]):e[n[0]];console.warn("ns",n[0],"not in",e)}function o(t,e){var r=Array.from(arguments);if(r.length>2){for(;r.length>1;)r[0]=o(r[0],r[1]),r.splice(1,1);return r[0]}if("string"==typeof t)t.match(/\{[^\{\}]*\}/g)?.forEach((function(n){var r=c(n.substring(1,n.length-1),e);void 0!==r&&(t=t.replace(n,r))}));else if(n(t))switch(t.constructor){case Object:Object.keys(t).forEach((function(n){t.hasOwnProperty(n)&&(t[n]=o(t[n],e))}));break;case Array:t.forEach((function(n,r,a){a[r]=o(t[r],e)}))}return t}function i(t){return t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("")}function l(t,e){let n;return()=>{clearTimeout(n),n=setTimeout((function(){t(...arguments)}),e)}}function u(t){let e=document.createElement("template");return t=t.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,"<$1$2></$1>"),e.innerHTML=t,e.content.normalize(),Array.from(e.content.childNodes)}function d(t,e){const n=Object.getOwnPropertyDescriptors(t);for(const[t,r]of Object.entries(n))("get"in r||"set"in r)&&Object.defineProperty(e,t,r)}t.d(e,{DC:()=>w,MC:()=>O,Oc:()=>E,E_:()=>N,IT:()=>d,sg:()=>l,bD:()=>s,c2:()=>T,YO:()=>a,Rc:()=>G,tn:()=>L,qS:()=>u,nz:()=>n,TK:()=>i,k5:()=>c,lB:()=>I,AU:()=>p,on:()=>g,xH:()=>b,qg:()=>o,mf:()=>r,hZ:()=>v});const f=new Function("try {return this===window;}catch(e){ return false;}");function h(t){return t&&t instanceof HTMLElement}function m(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function p(t,e,n){t.removeEventListener(m(e),n)}function g(t,e,n,r=!1){return t.addEventListener(m(e),n,{capture:!1,once:r}),n}function b(t,e,n){return g(t,e,n,!0),n}class y{stopped=!1;constructor(){}stop(){this.stopped=!0}}function v(t,e,n={},r="l",a){const s=/^_mc/.test(e)?e:m(e),c=a||new y,o=new CustomEvent(s,{detail:{data:n,control:c},bubbles:!1});c.stopped||/l/.test(r)&&(t.dispatchEvent(o),o.stopImmediatePropagation(),c.stopped)||/[ud]/.test(r)&&(-1===r.indexOf("l")&&(r+="l"),setTimeout((()=>{if(r.indexOf("u")>-1){let e=t.parentElement?.closest("[data-mc]");e&&e?._mc.trigger(s,n,r,c)}if(r.indexOf("d")>-1){let e=t._mc.children();e&&e.forEach((t=>t.trigger(s,n,r)))}}),0))}class E{_target;constructor(t){var e;this._target=new WeakRef(t||{}),function(t){if(!f()||t.constructor===w)return;const e=t.target;if(e instanceof HTMLElement){let n=t;Object.getOwnPropertyNames(n.constructor.prototype).filter((t=>/^(on[A-Z]|one[A-Z])/.test(t)&&"function"==typeof n.constructor.prototype[t])).forEach((t=>{let r=/^one/.test(t),a=t.replace(/^on[e]{0,1}/,""),s=a.toLowerCase();if("on"+s in e){let r=e=>{n[t](e)};e.addEventListener(s,r)}else g(e,a,(e=>{n[t](e)}),r)}))}}(this),e=this,setTimeout((()=>{e.constructor!==w&&e.trigger("Init")}),0)}get target(){return this._target.deref()}}class O extends E{constructor(t){super(t)}}class w extends E{constructor(t){super(t)}static add(t,e,n={}){return function(t,e,n={}){let r=t;r._mc||(r._mc=new w(t));const a=r._mc;return e.length&&!a[e]&&(a[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}(t,e,n)}static remove(t,e){!function(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}(t,e)}off(t,e){p(this.target,t,e)}on(t,e){return g(this.target,t,e)}one(t,e){return b(this.target,t,e)}trigger(t,e={},n="l",r){v(this.target,t,e,n,r)}ancestors(){let t=this?.target,e=[];if(!h(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 h(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return h(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!h(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}const A=new Set;function C(t){return()=>{const e=Array.from(document.querySelectorAll(`[data-mc*="${t}"]`)).filter((t=>t instanceof HTMLElement));if(0===e.length)return;const n=customElements.get(t);e.forEach((e=>{try{w.add(e,n.name,new n(e))}catch(t){if(!n.create)throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`;{let t=n.create(e);t.setAttribute("data-mc",e.getAttribute("data-mc")),e.replaceWith(t),e=t}}const r=e.getAttribute("data-mc").split(" ").filter((e=>e!==t&&""!==e)).join(" ").trim();e.setAttribute("data-mc",r)}))}}function k(t){if(A.has(t))return;A.add(t);const e="./"+t.split("-").join("/")+".js",n=document.createElement("script");n.setAttribute("src",e),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("data-name",t),n.setAttribute("loading",""),customElements.whenDefined(t).then(C(t)),n.addEventListener("load",(e=>{A.delete(t),document.head.querySelector(`script[data-name="${t}"]`)?.remove()})),n.addEventListener("error",(t=>{console.error("could not load DC code from",e)})),document.head.append(n)}function j(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!A.has(t.tagName.toLowerCase()))).forEach((t=>{k(t.tagName.toLowerCase())})),[...document.querySelectorAll('[data-mc]:not([data-mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("data-mc")?.split(" ").filter((t=>""!==t));e?.forEach((t=>{const e=customElements.get(t);A.has(t)||e?e&&C(t)():k(t)}))}))}let _=!1,S=null;function N(t=!0){return t?(_=t,S=new MutationObserver(j),setTimeout((()=>{S.observe(document.body,{childList:!0,subtree:!0}),j()}),5),window.autoload=window.autoload||N,_):(S?.disconnect(),S=null,_)}function T(t,e,n=[]){if(customElements.get(t))return void console.warn(`IGNORED: Custom element "${t}" is already defined!`);if(!t.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=i(t);e.prototype instanceof E?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends HTMLElement{constructor(t){super(),w.add(this,r,new e(this,t))}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}static get observedAttributes(){return n}})):customElements.define(t,e)}function L(t){return customElements.get(t)}function x(t){return null!=t&&"object"==typeof t}function D(t){let e=new Set,n=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(n))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(n));r.forEach((t=>r.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(n))).forEach((t=>{(t.nodeValue||"").match(n).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}N.state=A;const M=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class q extends w{data={};oldDisplay="";constructor(t){super(t),D(t).forEach((t=>this.data[t]="")),I(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var r;this.data.observe((r=t.getAttribute(e),a=>{let s=r;n.forEach((t=>{s=s.replace(t,a[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,s)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{e=!0;let r=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>a=>{let s=e;r.forEach((t=>{s=s.replace(t,a[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,n.nodeValue=s})(n.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!M.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((n=>{this.data.hasOwnProperty(n)&&(e[n]=t.detail.data[n])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const P={};function H(t){let e=t.constructor.name;return P[e]||function(t){const e=t.constructor,n=e.name;let r=class extends e{#e=!0;#n=[];constructor(t){super(t),this.constructor.callbacks=[],x(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#n}set callbacks(t){this.#n=t}observe(t){return this.#n.push(t),this}bind(t){if(x(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!D(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||w.add(t,"_placeholders",new q(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),n=function(t){let n=a(t);e.forEach((t=>{t&&v(t,"data",n)}))};this.#n.push(n),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=x(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#e&&this.#n.forEach((t=>{t(e)})),this}};return P[n]=r,r}(t)}const I=(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 n=t[e],r=new(H(n))(n),a=l((function(){r.notify()}),0);Object.defineProperty(t,e,{enumerable:!0,get(){if(x(r.valueOf())){let t=structuredClone(Object.assign({},r));setTimeout((function(){s(structuredClone(Object.assign({},r)),t)||a()}),0)}return r},set(t){if(typeof t==typeof r.valueOf())if(x(r.valueOf())&&r.valueOf()instanceof Array==0)void 0===r?.constructor?.prototype?.observe&&(r=new(H(t))(structuredClone(Object.assign({},t))),d(t,r)),Object.assign(r,t),r.notify();else{let e=r.valueOf(),n=r.callbacks;t!==e&&(r=new(H(t))(t),r.callbacks=n,a())}else console.warn("IGNORED - cannot change observable types, IS:",typeof r.valueOf(),r,"- CANNOT BECOME:",typeof t)}}),t[e]=n}})),t);class V{constructor(t){}}class R extends V{#r;constructor(t){super(t),this.#r=t}get val(){return new FormData(this.#r.form).get(this.#r.name)}set val(t){[...this.#r.form.querySelectorAll(`input[type="radio"][name="${this.#r.name}"]`)].filter((e=>e.getAttribute("value")===t)).shift().checked=!0}}class $ extends V{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.checked}set val(t){this.#r.checked=t}}class Z extends V{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.value}set val(t){this.#r.value=t}}class z extends V{#r;#a=!1;constructor(t){super(t),this.#r=t,this.#a=t.multiple}get val(){const t=[];return[...this.#r.querySelectorAll("option")].filter((t=>t.selected)).forEach((e=>{t.push(e.value)})),this.#a?t:t.length?t[0]:""}set val(t){t="string"==typeof t?[t]:t,[...this.#r.querySelectorAll("option")].forEach((e=>{t.indexOf(e.value)>-1?e.selected=!0:e.selected=!1}))}}class B extends V{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.value||""}set val(t){this.#r.value=t}}const F=t=>{let e=[...(t||document).querySelectorAll("input,select,textarea")],n={};return e.forEach((t=>{const e=t.getAttribute("name");if(e){let r=!1;switch((t=>t.tagName.toLowerCase())(t)){case"input":switch(t.type){case"radio":r=new R(t);break;case"checkbox":r=new $(t);break;default:r=new Z(t)}break;case"select":r=new z(t);break;case"textarea":r=new B(t);break;default:console.warn("handler missing:",e,"for",t.tagName.toLowerCase(),t)}r&&(w.add(t,e,r),Object.defineProperty(n,e,{enumerable:!0,configurable:!0,get:()=>r.val,set:t=>{r.val!==t&&(r.val=t)}}))}})),n};function G(t,e,n){let r=F(n);t[e]=Object.assign({},r),I(t,e),d(r,t[e]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{n.addEventListener("input",(n=>{t[e].notify()}))}))}var J=e.DC,U=e.MC,Y=e.Oc,K=e.E_,W=e.IT,Q=e.sg,X=e.bD,tt=e.c2,et=e.YO,nt=e.Rc,rt=e.tn,at=e.qS,st=e.nz,ct=e.TK,ot=e.k5,it=e.lB,lt=e.AU,ut=e.on,dt=e.xH,ft=e.qg,ht=e.mf,mt=e.hZ;export{J as DC,U as MC,Y as McBase,K as autoload,W as copyGettersSetters,Q as debounce,X as deepEqual,tt as defineCE,et as flattenObject,nt as formValues,rt as getCE,at as htmlToElements,st as isNativeObject,ct as kebabToPascal,ot as nameSpace,it as observe,lt as off,ut as on,dt as one,ft as parse,ht as sortObject,mt as trigger};

package/dist/observables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"observables.d.ts","sourceRoot":"","sources":["../src/observables.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA0D,MAAM,cAAc,CAAC;AAQnG,KAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;AAyIrC,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;IACpE,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC3B,CAAC;AAsGF,eAAO,MAAM,OAAO,WAAY,WAAW,iBAAiB,MAAM,KAAG,WA2EpE,CAAC"}
+{"version":3,"file":"observables.d.ts","sourceRoot":"","sources":["observables.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA0D,MAAM,cAAc,CAAC;AAQnG,KAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;AAiJrC,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;IACpE,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC3B,CAAC;AAsGF,eAAO,MAAM,OAAO,WAAY,WAAW,iBAAiB,MAAM,KAAG,WA2EpE,CAAC"}

package/dist/observables.ts

@@ -67,7 +67,11 @@ class Placeholders extends DC {
 					((template: string) => (data: LooseObject) => {
 						let result: string = template;
 						placeholders.forEach((placeholder) => {
-							result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
+							result = result.replace(
+								placeholder,
+								// JSON.stringify(data[placeholder.replace(/[\{\}]/g, '')])
+								data[placeholder.replace(/[\{\}]/g, '')]
+							);
 						});
 						target.setAttribute(attr, result);
 					})(target.getAttribute(attr))
@@ -91,7 +95,11 @@ class Placeholders extends DC {
 					((template: string) => (data: LooseObject) => {
 						let result: string = template;
 						placeholders.forEach((placeholder) => {
-							result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
+							result = result.replace(
+								placeholder,
+								// JSON.stringify(data[placeholder.replace(/[\{\}]/g, '')])
+								data[placeholder.replace(/[\{\}]/g, '')]
+							);
 						});
 
 						if (this.oldDisplay) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@twobirds/microcomponents",
-	"version": "0.1.18",
+	"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 -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/* 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"
 	},