@twobirds/microcomponents 0.10.3 → 0.12.1

package/dist/state/formValues.js

@@ -619,7 +619,12 @@ function bindTemplateEvents(rootElement, instance) {
 //#endregion
 //#region src/core/mcGuards.ts
 function isMcHost(element, key) {
-	return typeof HTMLElement !== "undefined" && element instanceof HTMLElement && "_mc" in element && (key === void 0 || key in element._mc);
+	if (typeof HTMLElement === "undefined" || !(element instanceof HTMLElement)) return false;
+	if (!("_mc" in element)) return false;
+	if (key === void 0) return true;
+	const mc = element._mc;
+	if (typeof mc !== "object" || mc === null) return false;
+	return key in mc;
 }
 //#endregion
 //#region src/core/MC.ts
@@ -627,7 +632,7 @@ function add(targetHTMLElement, key, element = {}) {
 	const node = targetHTMLElement;
 	if (!("_mc" in targetHTMLElement)) node._mc = new DC(targetHTMLElement);
 	const _mc = node._mc;
-	if (key.length && !_mc[key]) {
+	if (key.length) {
 		_mc[key] = element;
 		if (targetHTMLElement instanceof HTMLElement && !targetHTMLElement.getAttribute("data-mc")) targetHTMLElement.setAttribute("data-mc", "");
 	}
@@ -793,7 +798,7 @@ runs once after the constructor.
 @group Micro Components
 */
 var McBase = class {
-	_target;
+	#target;
 	/**
 	* Loaded asset cache, keyed by camelCase descriptor (`'targetHtml'` → `.target.html`).
 	* Inlined by the bundler in a bundled build, filled by `loadAssets()` in dev/autoload.
@@ -822,7 +827,7 @@ var McBase = class {
 	@param target - The object or element this microcomponent represents.
 	*/
 	constructor(target) {
-		this._target = new WeakRef(target || {});
+		this.#target = new WeakRef(target || {});
 		const ctor = this.constructor;
 		if (this instanceof DC && this.constructor !== DC) autoAttachListeners(this);
 		const remaining = (ctor.assets ?? []).filter((key) => !ctor._assets[key]);
@@ -849,7 +854,7 @@ var McBase = class {
 	@returns The target object.
 	*/
 	get target() {
-		return this._target.deref();
+		return this.#target.deref();
 	}
 	/**
 	The loaded assets for this component instance.
@@ -1458,7 +1463,8 @@ data object and updates the corresponding DOM locations when notified of changes
 */
 var Placeholders = class extends DC {
 	data = {};
-	oldDisplay = "";
+	#oldDisplay = "";
+	#restored = false;
 	/**
 	Creates a new `Placeholders` instance for the given HTML element.
 	
@@ -1474,9 +1480,22 @@ var Placeholders = class extends DC {
 		observe(this);
 		this.#attachCallbacks();
 	}
+	/**
+	Replaces every occurrence of one placeholder in a template.
+	The placeholder is escaped into a global regex, so a repeated `{x}` is fully
+	substituted — `String.replace` with a string pattern replaces one occurrence only.
+	@param template - The template holding the placeholder.
+	@param placeholder - The `{key}` token to substitute.
+	@param value - The replacement value.
+	@returns The template with every occurrence replaced.
+	*/
+	#substitute(template, placeholder, value) {
+		placeholder.replace(/[\{\}]/g, "");
+		const escaped = placeholder.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		return template.replace(new RegExp(escaped, "g"), value);
+	}
 	#attachCallbacks() {
 		const target = this.target;
-		let hide = false;
 		(target.getAttributeNames ? target.getAttributeNames() : []).filter((attr) => target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)).forEach((attr) => {
 			const placeholders = new Set(target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g));
 			/* v8 ignore next -- attr passed the filter above, so its value is a non-null string */
@@ -1484,32 +1503,36 @@ var Placeholders = class extends DC {
 			this.data.subscribe(((template) => (data) => {
 				let result = template;
 				placeholders.forEach((placeholder) => {
-					result = result.replace(placeholder, String(data[placeholder.replace(/[\{\}]/g, "")]));
+					result = this.#substitute(result, placeholder, String(data[placeholder.replace(/[\{\}]/g, "")]));
 				});
 				target.setAttribute(attr, result);
 			})(attrTemplate));
 		});
-		[...target.childNodes].filter((childNode) => {
+		const textNodes = [...target.childNodes].filter((childNode) => {
 			return childNode.nodeType === 3 && (childNode.nodeValue || "").match(/\{[^\{\}]*\}/g);
-		}).forEach((childNode) => {
-			hide = true;
-			/* v8 ignore next -- the filter above only admits text nodes with a non-empty
-			nodeValue, so the ?? fallback is unreachable */
-			const textTemplate = childNode.nodeValue ?? "";
-			const placeholders = new Set(textTemplate.match(/\{[^\{\}]*\}/g));
-			this.data.subscribe(((template) => (data) => {
-				let result = template;
-				placeholders.forEach((placeholder) => {
-					result = result.replace(placeholder, String(data[placeholder.replace(/[\{\}]/g, "")]));
-				});
-				if (this.oldDisplay) target.style = this.oldDisplay;
-				else target.removeAttribute("style");
-				delete this.oldDisplay;
-				childNode.nodeValue = result;
-			})(textTemplate));
-			this.oldDisplay = target.getAttribute("style") || "";
-			if (hide && !inputTags.includes(target.tagName) && target.tagName !== "FIELDSET") target.style.display = "none";
 		});
+		if (textNodes.length) {
+			this.#oldDisplay = target.getAttribute("style") || "";
+			textNodes.forEach((childNode) => {
+				/* v8 ignore next -- the filter above only admits text nodes with a non-empty
+				nodeValue, so the ?? fallback is unreachable */
+				const textTemplate = childNode.nodeValue ?? "";
+				const placeholders = new Set(textTemplate.match(/\{[^\{\}]*\}/g));
+				this.data.subscribe(((template) => (data) => {
+					let result = template;
+					placeholders.forEach((placeholder) => {
+						result = this.#substitute(result, placeholder, String(data[placeholder.replace(/[\{\}]/g, "")]));
+					});
+					if (!this.#restored) {
+						this.#restored = true;
+						if (this.#oldDisplay) target.style = this.#oldDisplay;
+						else target.removeAttribute("style");
+					}
+					childNode.nodeValue = result;
+				})(textTemplate));
+				if (!inputTags.includes(target.tagName) && target.tagName !== "FIELDSET") target.style.display = "none";
+			});
+		}
 	}
 	/**
 	Handles a `data` custom event to update the internal placeholder data.
@@ -1757,7 +1780,7 @@ function makeObservable(val) {
 		`{count}` placeholders update on every change.
 		*/
 		bind(target) {
-			if (!isBrowser()) return;
+			if (!isBrowser()) return this;
 			if (isObservableObject(this.valueOf())) {
 				makePlaceholders(target);
 				const placeholders = [target, ...target.querySelectorAll("[data-mc]")].filter((e) => {
@@ -1906,8 +1929,12 @@ function observe(target, propertyName) {
 			if (key[0] === "_" || current === void 0) return;
 			const wrappedVal = current;
 			let o = new (getConstructor(wrappedVal))(wrappedVal);
+			let notifyPending = false;
 			const debouncedNotify = function() {
+				if (notifyPending) return;
+				notifyPending = true;
 				queueMicrotask(function() {
+					notifyPending = false;
 					o.notify();
 				});
 			};
@@ -2130,12 +2157,13 @@ var RadioHandler = class extends InputBase {
 	/**
 	Sets the selected radio button by value.
 	Finds and checks the first radio input matching the specified value within the same group.
+	An unknown value has no matching radio in the group, so the group is left untouched —
+	the setter never throws.
 	@param value - The value to match against radio inputs in this group.
 	*/
 	set val(value) {
-		/* v8 ignore next */
-		const arr = [...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`) ?? []];
-		arr.filter((e) => e.getAttribute("value") === value).shift().checked = true;
+		const match = [...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`) ?? []].filter((e) => e.getAttribute("value") === value).shift();
+		if (match) match.checked = true;
 	}
 };
 /**

package/dist/state/index.d.ts

@@ -7,4 +7,6 @@ export { observe, observePlugin, isAlreadyObserved } from './observables.js';
 export type { Observable, Callback, Observed, ObservedKey, Unobserved } from './observables.js';
 /** @group State */
 export { formValues, formValuePlugin } from './formValues.js';
+/** @group State */
+export { makePlaceholders } from './placeholders.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/state/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/state/index.ts"],"names":[],"mappings":"AAAA;;EAEE;AACF,mBAAmB;AACnB,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,mBAAmB;AACnB,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAChG,mBAAmB;AACnB,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/state/index.ts"],"names":[],"mappings":"AAAA;;EAEE;AACF,mBAAmB;AACnB,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,mBAAmB;AACnB,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAChG,mBAAmB;AACnB,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC9D,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/state/observables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"observables.d.ts","sourceRoot":"","sources":["../../src/state/observables.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"observables.d.ts","sourceRoot":"","sources":["../../src/state/observables.ts"],"names":[],"mappings":"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"}

package/dist/state/observables.js

@@ -619,7 +619,12 @@ function bindTemplateEvents(rootElement, instance) {
 //#endregion
 //#region src/core/mcGuards.ts
 function isMcHost(element, key) {
-	return typeof HTMLElement !== "undefined" && element instanceof HTMLElement && "_mc" in element && (key === void 0 || key in element._mc);
+	if (typeof HTMLElement === "undefined" || !(element instanceof HTMLElement)) return false;
+	if (!("_mc" in element)) return false;
+	if (key === void 0) return true;
+	const mc = element._mc;
+	if (typeof mc !== "object" || mc === null) return false;
+	return key in mc;
 }
 //#endregion
 //#region src/core/MC.ts
@@ -627,7 +632,7 @@ function add(targetHTMLElement, key, element = {}) {
 	const node = targetHTMLElement;
 	if (!("_mc" in targetHTMLElement)) node._mc = new DC(targetHTMLElement);
 	const _mc = node._mc;
-	if (key.length && !_mc[key]) {
+	if (key.length) {
 		_mc[key] = element;
 		if (targetHTMLElement instanceof HTMLElement && !targetHTMLElement.getAttribute("data-mc")) targetHTMLElement.setAttribute("data-mc", "");
 	}
@@ -793,7 +798,7 @@ runs once after the constructor.
 @group Micro Components
 */
 var McBase = class {
-	_target;
+	#target;
 	/**
 	* Loaded asset cache, keyed by camelCase descriptor (`'targetHtml'` → `.target.html`).
 	* Inlined by the bundler in a bundled build, filled by `loadAssets()` in dev/autoload.
@@ -822,7 +827,7 @@ var McBase = class {
 	@param target - The object or element this microcomponent represents.
 	*/
 	constructor(target) {
-		this._target = new WeakRef(target || {});
+		this.#target = new WeakRef(target || {});
 		const ctor = this.constructor;
 		if (this instanceof DC && this.constructor !== DC) autoAttachListeners(this);
 		const remaining = (ctor.assets ?? []).filter((key) => !ctor._assets[key]);
@@ -849,7 +854,7 @@ var McBase = class {
 	@returns The target object.
 	*/
 	get target() {
-		return this._target.deref();
+		return this.#target.deref();
 	}
 	/**
 	The loaded assets for this component instance.
@@ -1458,7 +1463,8 @@ data object and updates the corresponding DOM locations when notified of changes
 */
 var Placeholders = class extends DC {
 	data = {};
-	oldDisplay = "";
+	#oldDisplay = "";
+	#restored = false;
 	/**
 	Creates a new `Placeholders` instance for the given HTML element.
 	
@@ -1474,9 +1480,22 @@ var Placeholders = class extends DC {
 		observe(this);
 		this.#attachCallbacks();
 	}
+	/**
+	Replaces every occurrence of one placeholder in a template.
+	The placeholder is escaped into a global regex, so a repeated `{x}` is fully
+	substituted — `String.replace` with a string pattern replaces one occurrence only.
+	@param template - The template holding the placeholder.
+	@param placeholder - The `{key}` token to substitute.
+	@param value - The replacement value.
+	@returns The template with every occurrence replaced.
+	*/
+	#substitute(template, placeholder, value) {
+		placeholder.replace(/[\{\}]/g, "");
+		const escaped = placeholder.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		return template.replace(new RegExp(escaped, "g"), value);
+	}
 	#attachCallbacks() {
 		const target = this.target;
-		let hide = false;
 		(target.getAttributeNames ? target.getAttributeNames() : []).filter((attr) => target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)).forEach((attr) => {
 			const placeholders = new Set(target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g));
 			/* v8 ignore next -- attr passed the filter above, so its value is a non-null string */
@@ -1484,32 +1503,36 @@ var Placeholders = class extends DC {
 			this.data.subscribe(((template) => (data) => {
 				let result = template;
 				placeholders.forEach((placeholder) => {
-					result = result.replace(placeholder, String(data[placeholder.replace(/[\{\}]/g, "")]));
+					result = this.#substitute(result, placeholder, String(data[placeholder.replace(/[\{\}]/g, "")]));
 				});
 				target.setAttribute(attr, result);
 			})(attrTemplate));
 		});
-		[...target.childNodes].filter((childNode) => {
+		const textNodes = [...target.childNodes].filter((childNode) => {
 			return childNode.nodeType === 3 && (childNode.nodeValue || "").match(/\{[^\{\}]*\}/g);
-		}).forEach((childNode) => {
-			hide = true;
-			/* v8 ignore next -- the filter above only admits text nodes with a non-empty
-			nodeValue, so the ?? fallback is unreachable */
-			const textTemplate = childNode.nodeValue ?? "";
-			const placeholders = new Set(textTemplate.match(/\{[^\{\}]*\}/g));
-			this.data.subscribe(((template) => (data) => {
-				let result = template;
-				placeholders.forEach((placeholder) => {
-					result = result.replace(placeholder, String(data[placeholder.replace(/[\{\}]/g, "")]));
-				});
-				if (this.oldDisplay) target.style = this.oldDisplay;
-				else target.removeAttribute("style");
-				delete this.oldDisplay;
-				childNode.nodeValue = result;
-			})(textTemplate));
-			this.oldDisplay = target.getAttribute("style") || "";
-			if (hide && !inputTags.includes(target.tagName) && target.tagName !== "FIELDSET") target.style.display = "none";
 		});
+		if (textNodes.length) {
+			this.#oldDisplay = target.getAttribute("style") || "";
+			textNodes.forEach((childNode) => {
+				/* v8 ignore next -- the filter above only admits text nodes with a non-empty
+				nodeValue, so the ?? fallback is unreachable */
+				const textTemplate = childNode.nodeValue ?? "";
+				const placeholders = new Set(textTemplate.match(/\{[^\{\}]*\}/g));
+				this.data.subscribe(((template) => (data) => {
+					let result = template;
+					placeholders.forEach((placeholder) => {
+						result = this.#substitute(result, placeholder, String(data[placeholder.replace(/[\{\}]/g, "")]));
+					});
+					if (!this.#restored) {
+						this.#restored = true;
+						if (this.#oldDisplay) target.style = this.#oldDisplay;
+						else target.removeAttribute("style");
+					}
+					childNode.nodeValue = result;
+				})(textTemplate));
+				if (!inputTags.includes(target.tagName) && target.tagName !== "FIELDSET") target.style.display = "none";
+			});
+		}
 	}
 	/**
 	Handles a `data` custom event to update the internal placeholder data.
@@ -1757,7 +1780,7 @@ function makeObservable(val) {
 		`{count}` placeholders update on every change.
 		*/
 		bind(target) {
-			if (!isBrowser()) return;
+			if (!isBrowser()) return this;
 			if (isObservableObject(this.valueOf())) {
 				makePlaceholders(target);
 				const placeholders = [target, ...target.querySelectorAll("[data-mc]")].filter((e) => {
@@ -1906,8 +1929,12 @@ function observe(target, propertyName) {
 			if (key[0] === "_" || current === void 0) return;
 			const wrappedVal = current;
 			let o = new (getConstructor(wrappedVal))(wrappedVal);
+			let notifyPending = false;
 			const debouncedNotify = function() {
+				if (notifyPending) return;
+				notifyPending = true;
 				queueMicrotask(function() {
+					notifyPending = false;
 					o.notify();
 				});
 			};

package/dist/state/placeholders.d.ts

@@ -21,7 +21,6 @@ data object and updates the corresponding DOM locations when notified of changes
 declare class Placeholders extends DC {
     #private;
     data: Observable<Record<string, unknown>>;
-    oldDisplay?: string;
     /**
     Creates a new `Placeholders` instance for the given HTML element.
     

package/dist/state/placeholders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"placeholders.d.ts","sourceRoot":"","sources":["../../src/state/placeholders.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,EAAE,EAAE,KAAK,QAAQ,EAAE,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAoD5D;;;;;;EAME;AACF,cAAM,YAAa,SAAQ,EAAE;;IAE5B,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAwD;IACjG,UAAU,CAAC,EAAE,MAAM,CAAM;IAEzB;;;;;;;;MAQE;gBACU,MAAM,EAAE,WAAW;IAuF/B;;;;;;;MAOE;IACF,MAAM,CAAC,EAAE,EAAE,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CAOzD;AAmBD;;;;;;;EAOE;AACF,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,gBAAgB,GAAG,UAAU,GAAG,IAAI,CAK3F;AAED;;;;EAIE;AACF,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,WAAW,EAAE;IAAE,aAAa,CAAC,EAAE,YAAY,CAAA;CAAE,CAAC,CAAC"}
+{"version":3,"file":"placeholders.d.ts","sourceRoot":"","sources":["../../src/state/placeholders.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,EAAE,EAAE,KAAK,QAAQ,EAAE,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAoD5D;;;;;;EAME;AACF,cAAM,YAAa,SAAQ,EAAE;;IAE5B,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAwD;IAQjG;;;;;;;;MAQE;gBACU,MAAM,EAAE,WAAW;IA+G/B;;;;;;;MAOE;IACF,MAAM,CAAC,EAAE,EAAE,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CAOzD;AAmBD;;;;;;;EAOE;AACF,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,gBAAgB,GAAG,UAAU,GAAG,IAAI,CAK3F;AAED;;;;EAIE;AACF,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,WAAW,EAAE;IAAE,aAAa,CAAC,EAAE,YAAY,CAAA;CAAE,CAAC,CAAC"}