@twobirds/microcomponents 0.10.2 → 0.11.0

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"}

package/dist/utils/autoload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autoload.d.ts","sourceRoot":"","sources":["../../src/utils/autoload.ts"],"names":[],"mappings":"AAAA;;;;;;;;;EASE;AAsJF;;;;;;;;;;;;;;;;EAgBE;AACF,MAAM,WAAW,QAAQ;IACxB;;;;;;;;;;;;;IAaG;IACH,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B;;;;;IAKG;IACH,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACnB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,MAAM;QACf,QAAQ,CAAC,EAAE,QAAQ,CAAC;KACpB;CACD;AAID,wBAAgB,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAuBxD;yBAvBe,QAAQ"}
+{"version":3,"file":"autoload.d.ts","sourceRoot":"","sources":["../../src/utils/autoload.ts"],"names":[],"mappings":"AAAA;;;;;;;;;EASE;AA4JF;;;;;;;;;;;;;;;;EAgBE;AACF,MAAM,WAAW,QAAQ;IACxB;;;;;;;;;;;;;IAaG;IACH,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B;;;;;IAKG;IACH,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACnB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,MAAM;QACf,QAAQ,CAAC,EAAE,QAAQ,CAAC;KACpB;CACD;AAMD,wBAAgB,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmCxD;yBAnCe,QAAQ"}

package/dist/utils/helpers.d.ts

@@ -89,6 +89,8 @@ export declare function flattenObject(source: object, doSort?: boolean): Record<
 export declare function deepEqual(a: unknown, b: unknown): boolean;
 /**
  * Retrieves a nested value from an object using a namespace path (dot-separated).
+ * A present falsy leaf (`0`, `''`, `false`, `null`) is a real value and is returned;
+ * only an absent key yields `undefined`.
  * @param ns - The namespace string or array of keys representing the path.
  * @param obj - The object to traverse.
  * @returns The value at the specified namespace path, or undefined if not found.
@@ -98,6 +100,7 @@ export declare function deepEqual(a: unknown, b: unknown): boolean;
  * const data = { user: { profile: { name: 'Alice' } } };
  * console.log(nameSpace('user.profile.name', data));
  * console.log(nameSpace(['user', 'profile'], data));
+ * console.log(nameSpace('count', { count: 0 })); // 0, not undefined
  * ```
  */
 export declare function nameSpace(ns: string | string[], obj?: object): unknown;

package/dist/utils/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAE/E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAiB1E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAE,OAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAqB7F;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,CAiCzD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,GAAE,MAAW,GAAG,OAAO,CAe1E;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,EAAE,EACpD,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,MAAM,EACjB,GAAG,IAAI,EAAE,OAAO,EAAE,GAChB,CAAC,CAgCH;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAExC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAC3C,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,OAAO,EAC7B,YAAY,EAAE,MAAM,GAClB,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAStB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1D;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAOvE;AAmCD,wBAAgB,SAAS,CAAC,MAAM,EAAE,QAAQ,GAAG,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,aAAa,CAanF;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CA2B1F;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAmC9E;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,kBAAkB,CACjC,WAAW,EAAE,WAAW,GAAG,UAAU,EACrC,QAAQ,EAAE,YAAY,GACpB,IAAI,CA2CN"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAE/E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAiB1E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAE,OAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAqB7F;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,CAiCzD;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,GAAE,MAAW,GAAG,OAAO,CAoB1E;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,EAAE,EACpD,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,MAAM,EACjB,GAAG,IAAI,EAAE,OAAO,EAAE,GAChB,CAAC,CAmCH;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAExC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAC3C,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,OAAO,EAC7B,YAAY,EAAE,MAAM,GAClB,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAStB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1D;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAOvE;AAmCD,wBAAgB,SAAS,CAAC,MAAM,EAAE,QAAQ,GAAG,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,aAAa,CAanF;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CA2B1F;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAmC9E;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,kBAAkB,CACjC,WAAW,EAAE,WAAW,GAAG,UAAU,EACrC,QAAQ,EAAE,YAAY,GACpB,IAAI,CA2CN"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@twobirds/microcomponents",
-	"version": "0.10.2",
+	"version": "0.11.0",
 	"description": "Micro Components",
 	"keywords": [
 		"PWA",
@@ -79,11 +79,12 @@
 		"format": "oxfmt .",
 		"lint": "oxlint \"src\"",
 		"fix": "oxfmt . && oxlint \"src\" --fix",
-		"check": "tsc --noEmit -p tsconfig.lib.json && tsc --noEmit -p tsconfig.cli.json && tsc --noEmit -p tsconfig.mcp.json && tsc -p tsconfig.test.json && tsc -p demo/web-test/tsconfig.demo.json && tsc --noEmit -p demo/shop/tsconfig.demo.json && tsc --noEmit -p demo/todo_mvc/tsconfig.demo.json && tsc --noEmit -p demo/docs/tsconfig.demo.json && tsc -p tsconfig.node.json",
+		"check": "tsc --noEmit -p tsconfig.lib.json && tsc --noEmit -p tsconfig.cli.json && tsc --noEmit -p tsconfig.mcp.json && tsc -p tsconfig.test.json && tsc -p demo/web-test/tsconfig.demo.json && tsc --noEmit -p demo/shop/tsconfig.demo.json && tsc --noEmit -p demo/todo_mvc/tsconfig.demo.json && tsc --noEmit -p demo/docs/tsconfig.demo.json && tsc -p tsconfig.node.json && tsc -p tsconfig.e2e.json",
 		"check:pack": "publint && attw --pack . --profile esm-only",
 		"test": "vitest",
 		"test:run": "vitest run --reporter=verbose",
 		"test:coverage": "vitest run --coverage",
+		"test:e2e": "pnpm run bundle && pnpm run demo:shop:build && vitest run --config vitest.e2e.config.ts",
 		"demo:shop": "vite --config demo/shop/vite.config.ts",
 		"demo:shop:bundled": "tsx demo/shop/vite.shop.bundle.ts",
 		"demo:shop:build": "tsx demo/build-demo.ts shop && pnpm run demo:shop:bundled",
@@ -121,6 +122,7 @@
 		"jsdom": "^29.1.1",
 		"oxfmt": "^0.59.0",
 		"oxlint": "^1.74.0",
+		"playwright": "1.61.0",
 		"publint": "^0.3.21",
 		"tsx": "^4.23.12",
 		"typedoc": "^0.28.20",