@twobirds/microcomponents 0.10.0 → 0.10.2

package/dist/mcp/concepts/event-system.md

@@ -7,7 +7,7 @@ Handler conventions (auto-attached):
 
 Lifecycle events when registered via defineCE:
 
-- oneInit() - constructor finished; all synchronous setup complete
+- oneInit() - constructor finished and declared assets loaded; read them via `this.assets`
 - onConnected() - element inserted into DOM
 - onDisconnected() - element removed from DOM
 - onAdopted() - element moved to new document

package/dist/mcp/index.js

@@ -44,8 +44,11 @@ above the first overload supplies the prose.
 @example Keep it fresh: pnpm run mcp:dev restarts the server process on change
 */
 var mcp_docs_generate_exports = /* @__PURE__ */ __exportAll({
+	extract: () => extract,
 	index: () => index$1,
-	undocumented: () => undocumented$1
+	scanFile: () => scanFile,
+	undocumented: () => undocumented$1,
+	walk: () => walk
 });
 /** Read a barrel file, returning each re-exported name with its group and hidden flag. */
 function readBarrel(file) {
@@ -53,10 +56,14 @@ function readBarrel(file) {
 	for (let i = 0; i < lines.length; i++) {
 		if (!/^\s*export\s+(type\s+)?\{/.test(lines[i])) continue;
 		let k = i;
-		while (k + 1 < lines.length && !/}\s*from/.test(lines[k])) {
+		while (k < lines.length) {
+			const stmt = lines[k].trim();
+			if (k > i) {
+				lines[i] += " " + stmt;
+				lines[k] = "";
+			}
+			if (/}\s*from/.test(stmt)) break;
 			k++;
-			lines[i] += " " + lines[k].trim();
-			lines[k] = "";
 		}
 		i = k;
 	}
@@ -64,7 +71,7 @@ function readBarrel(file) {
 	let pending = "";
 	for (let i = 0; i < lines.length; i++) {
 		const line = lines[i].trim();
-		if (line.startsWith("/**") && !pending) {
+		if (line.startsWith("/**")) {
 			let k = i;
 			while (k < lines.length && !lines[k].includes("*/")) k++;
 			pending = lines.slice(i, k + 1).join("\n");
@@ -147,7 +154,7 @@ function extract(block) {
 	if (raw.length) raw[0] = raw[0].replace(/^\/\*\*/, "");
 	if (raw.length > 1) raw[raw.length - 1] = raw[raw.length - 1].replace(/\*\/$/, "");
 	const markerCol = (/^[\t ]*/.exec(raw[1])?.[0] ?? "").length;
-	const lines = raw.map((l) => l.replace(/^\s*\*?\s?/, "")).map((l) => l.replace(/\{\@link(?:code|linkplain)?\s+([^\s}]+)[^}]*\}/g, "$1"));
+	const lines = raw.map((l) => l.replace(/^[\t ]*\*\s?/, "")).map((l) => l.replace(/\{\@link(?:code|linkplain)?\s+([^\s}]+)[^}]*\}/g, "$1"));
 	const isContinuation = (index) => {
 		return (/^[\t ]*/.exec(raw[index])?.[0] ?? "").length > markerCol;
 	};

package/dist/microcomponents.js

@@ -497,6 +497,20 @@ function kebabToPascal(str) {
 	return str.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
 }
 /**
+* Converts a PascalCase string to kebab-case.
+* Example: 'MyComponentName' -> 'my-component-name'
+* @param str - The PascalCase string to convert.
+* @returns The converted kebab-case string.
+*
+* @example
+* ```ts
+* console.log(pascalToKebab('MyElement'));
+* ```
+*/
+function pascalToKebab(str) {
+	return str.replace(/[A-Z]/g, (m, i) => (i ? "-" : "") + m.toLowerCase());
+}
+/**
 * Creates a debounced version of a function that delays execution until after the specified
 * number of milliseconds have elapsed since the last time this function was invoked.
 * Useful for rate-limiting expensive operations like event handlers or API calls.
@@ -783,13 +797,15 @@ function remove(target, key) {
 	if (!Object.keys(_mc).length && target instanceof HTMLElement && target.hasAttribute("data-mc")) target.removeAttribute("data-mc");
 }
 /**
-Runs the "Init" lifecycle event on a DOM microcomponent instance asynchronously.
+Runs the "Init" lifecycle event on a DOM microcomponent instance.
 
 This function schedules the `trigger('Init')` call in a microtask, ensuring
 that all synchronous initialization is complete before the lifecycle hook
-executes. Only `DC` instances have an Init lifecycle — the `McBase`
-constructor calls this exclusively behind an `instanceof DC` check, so the
-signature encodes that invariant instead of re-checking it at runtime.
+executes. The {@link DC} constructor calls it once the declared assets are in
+place — synchronously in a bundled build, after the fetch resolves in a
+dev/autoload build — so `oneInit()` always sees the loaded assets. Only `DC`
+instances have an Init lifecycle — the `DC` constructor calls this exclusively,
+so the signature encodes that invariant instead of re-checking it at runtime.
 
 @param element - The DOM microcomponent instance on which to trigger the Init event.
 */
@@ -857,16 +873,18 @@ function findMcAncestor(from, key) {
 The base class for all microcomponents — shared root of both {@link MC} and {@link DC}.
 
 Holds a `WeakRef` to the target (a DOM element for `DC`, or any plain object for `MC`)
-to avoid circular references. For `DC` subclasses it also bootstraps two automatic
-behaviours:
+to avoid circular references. It starts loading any `static assets` for `MC` and `DC`
+alike (shared per class through `_assetsPromise`), read through the {@link McBase.assets}
+getter. For `DC` subclasses it bootstraps one automatic behaviour:
 
 1. **Event listener auto-attachment** — methods whose names start with `on` or `one`
 (e.g. `onClick`, `oneInit`) are wired to the target element via {@link on} / {@link one}.
-2. **"Init" lifecycle event** — dispatched asynchronously in a microtask so that all
-synchronous constructor work finishes first.
 
-Both mechanisms run only when the instance is a `DC` (checked with `instanceof DC`).
-Plain `MC` instances skip them entirely, keeping server-side usage lightweight.
+The **"Init" lifecycle event** and the DOM attach of auto-attached assets are dispatched
+by the {@link DC} constructor — after the declared assets are in place — so that
+`oneInit()` runs once the instance is fully constructed and its assets are loaded. Plain
+`MC` instances fetch their assets server-side with no DOM attach and no `Init` lifecycle,
+keeping server-side usage lightweight.
 
 ### Plugin extension points
 
@@ -919,20 +937,45 @@ runs once after the constructor.
 var McBase = class {
 	_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.
+	* Read through the {@link McBase.assets} getter.
+	*/
+	static _assets = {};
+	/**
+	* Declares companion files for auto-loading by convention (e.g. `['targetHtml', 'json']`).
+	* Asset names are camelCase and translated into file extensions: `'targetHtml'` → `.target.html`.
+	*/
+	static assets = [];
+	/**
+	* In-flight asset request, cached per class so that instances constructed while
+	* the first fetch is still pending (e.g. in a loop) share a single request
+	* instead of each triggering their own. Resolves to the freshly loaded assets.
+	*/
+	static _assetsPromise;
+	/**
 	The constructor for the base `McBase` class.
 	
-	Initializes a weak reference to the target and triggers auto-attachment
-	of listeners and initialization lifecycle events.
+	Initializes a weak reference to the target, auto-attaches listeners for `DC`
+	subclasses, and starts loading any `static assets` for `MC` and `DC` alike —
+	a server-side `MC` fetches them with no DOM, a `DC` gets them attached by its
+	own constructor. The load is shared per class through `_assetsPromise`.
 	
 	@param target - The object or element this microcomponent represents.
 	*/
 	constructor(target) {
 		this._target = new WeakRef(target || {});
-		if (this instanceof DC && this.constructor !== DC) {
-			autoAttachListeners(this);
-			const tag = this.constructor.tag;
-			if (tag === void 0 || tag.toUpperCase() === this.target.tagName) init(this);
-		}
+		const ctor = this.constructor;
+		if (this instanceof DC && this.constructor !== DC) autoAttachListeners(this);
+		const remaining = (ctor.assets ?? []).filter((key) => !ctor._assets[key]);
+		if (remaining.length && !ctor._assetsPromise) ctor._assetsPromise = loadAssets(ctor._originalTag || (this instanceof DC ? this.target.tagName.toLowerCase() : pascalToKebab(ctor.name)), remaining).then((res) => {
+			const loadedAssets = {};
+			remaining.forEach((key, i) => {
+				loadedAssets[key] = res[i];
+			});
+			ctor._assets = Object.assign({}, ctor._assets, loadedAssets);
+			return loadedAssets;
+		});
 	}
 	/**
 	Returns the current target object (DOM node or other data) referenced by this microcomponent.
@@ -950,6 +993,21 @@ var McBase = class {
 	get target() {
 		return this._target.deref();
 	}
+	/**
+	The loaded assets for this component instance.
+	
+	`static assets` are loaded before `oneInit()` fires on a `DC`, so this getter is
+	ready inside the `oneInit()` callback. A server-side `MC` fills it from `loadAssets()`;
+	await `MC._assetsPromise` before reading it. It returns the merged asset record keyed
+	by descriptor: `css` / `targetCss` / `shadowCss` / `shadowHtml` / `targetHtml` arrive
+	as strings, `*Json` entries arrive parsed, and a plain `html` template is returned as a
+	string for `parse()`. An empty object when no assets are declared.
+	
+	@returns A record mapping asset keys to their content.
+	*/
+	get assets() {
+		return this.constructor._assets || {};
+	}
 };
 /**
 A general-purpose base microcomponent that does not require a DOM target.
@@ -957,6 +1015,11 @@ A general-purpose base microcomponent that does not require a DOM target.
 Inherits from `McBase`, but is primarily used as a lightweight container or
 for logic not directly tied to DOM elements.
 
+`static assets` work here too: a server-side `MC` fetches its companion files
+(`.json`, `.html`, `.css`) with `loadAssets()` and reads them through the
+{@link McBase.assets} getter — await `MC._assetsPromise` before reading. There is
+no DOM attach and no `Init` lifecycle; those are `DC`-only.
+
 @template TTarget - The concrete type of the wrapped target data; preserved by
 the `target` getter, so `new MC({ some: 'data' }).target.some` stays typed.
 @group Micro Components
@@ -1027,14 +1090,26 @@ and translated into file extensions: `'targetHtml'` → `.target.html`, `'json'`
 The path is derived from the custom element tag segments, and the basename is the
 last segment. For `<cart-container-checkout>`, assets load from `/cart/container/checkout.*`.
 
-When assets finish loading, an `'assets'` event fires so that `oneAssets(ev)` can
-process them. Everything ending in `Json` arrives parsed; all other files arrive as text.
+**Assets are loaded before `oneInit()` fires.** The constructor applies them to the
+target, then dispatches the `Init` lifecycle event — synchronously in a bundled build
+(assets inlined), after the fetch resolves in a dev/autoload build. Inside `oneInit()`
+the loaded assets are read through the {@link DC.assets} getter. Everything ending in
+`Json` arrives parsed; all other files arrive as text.
+
+**Auto-attached assets**: `.css`, `.target.css`, `.shadow.css`, `.target.html` and
+`.shadow.html` are attached automatically by `processAssets()` — CSS is injected into
+the document or shadow scope, HTML is set as `target.innerHTML` / `shadowRoot.innerHTML`,
+and native event handlers in the template (`<button click="this|go">`) are wired.
+
+**Plain `.html` is NOT auto-attached.** It is a template held in {@link DC.assets} for
+components created programmatically with a `data` parameter: in `oneInit()` you compile
+the target markup from template + data with `parse()`.
 
 **One-time global styles**: Assets named `'css'` and `'targetCss'` inject CSS into the
 global document scope via `injectCSS(document, ...)`. Because these are idempotent
 global side effects, they are processed only once — after the first instance loads them,
-the entries are removed from both `static assets` and `static _assets`. Subsequent
-instances skip loading and re-processing them entirely.
+the entries are dropped from `static _assets`. Subsequent instances skip re-processing
+them entirely.
 
 **CSS file roles**:
 
@@ -1045,7 +1120,9 @@ scope once, like `targetCss`.
 component's own shadow root, so each instance gets its own copy.
 
 Every declared asset — CSS, HTML, JSON — is inlined into `static _assets` at build time by
-the load-assets plugin, so a bundled build performs no fetches at all.
+the bundler, which replaces the `static assets` declaration with `static _assets` (the
+`static assets` line is deleted from the bundled `.js`) and collapses each inlined
+`.[shadow/target].css` / `.html` to a single line, so a bundled build performs no fetches.
 
 In a bundled build the plain `.css` files are additionally concatenated into a single
 `bundle.css` by the bundling script. That file is a convenience listing of the available
@@ -1057,14 +1134,14 @@ The runtime decides whether an asset still needs fetching with `!ctor._assets[ke
 inlined entry must never be an empty string: that would trigger a re-fetch of a file that
 does not exist in a bundled build.
 
-@example static assets with autoload
+@example static assets read in oneInit
 
 ```ts
 class CartCheckout extends DC {
 static assets = ['targetHtml', 'targetCss', 'configJson'];
 
-oneAssets(ev) {
-const { configJson } = ev.detail.data;
+oneInit() {
+const { configJson } = this.assets;
 console.log(configJson);
 }
 }
@@ -1073,6 +1150,26 @@ defineCE('cart-checkout', CartCheckout);
 
 `configJson` arrives already parsed into an object.
 
+@example plain .html template compiled with data
+
+```ts
+class UserCard extends DC {
+static assets = ['html', 'targetCss'];
+
+constructor(target: HTMLElement, data: { name: string }) {
+super(target);
+this.data = data;
+}
+
+oneInit() {
+this.target.innerHTML = parse(this.assets.html, this.data);
+}
+}
+defineCE('user-card', UserCard);
+```
+
+`user-card.html` holds the `{name}` template; `parse()` fills it from `data`.
+
 ### `static attributes?: object`
 
 Sets HTML attributes on every instance automatically.
@@ -1126,8 +1223,7 @@ internal events that can be caught with handler methods:
 | `onDisconnected()` | Element was removed from the DOM (`disconnectedCallback`) |
 | `onAdopted()` | Element was moved to a new document (`adoptedCallback`) |
 | `onAttributeChanged()` | An observed attribute changed (`attributeChangedCallback`) |
-| `oneInit()` | Constructor finished; all synchronous setup complete (microtask) |
-| `oneAssets()` | Constructor finished; all assets loaded and available; ev contains assets object |
+| `oneInit()` | Constructor finished and declared assets loaded; read them via `this.assets` |
 
 @example Event handlers in action
 
@@ -1242,22 +1338,6 @@ var DC = class DC extends McBase {
 	*/
 	static tag;
 	/**
-	* Result container for assets (e.g., `['targetHtml', 'json']`).
-	* Asset names (keys) are camelCase and translated into file extensions: `'targetHtml'` → `.target.html`.
-	*/
-	static _assets = {};
-	/**
-	* Declares companion files for auto-loading by convention (e.g., `['targetHtml', 'json']`).
-	* Asset names are camelCase and translated into file extensions: `'targetHtml'` → `.target.html`.
-	*/
-	static assets = [];
-	/**
-	* In-flight asset request, cached per class so that instances constructed while
-	* the first fetch is still pending (e.g. in a loop) share a single request
-	* instead of each triggering their own. Resolves to the freshly loaded assets.
-	*/
-	static _assetsPromise;
-	/**
 	* Sets HTML attributes on every instance automatically.
 	* Example: `{ role: 'listitem', 'aria-label': 'nav' }`.
 	*/
@@ -1269,8 +1349,10 @@ var DC = class DC extends McBase {
 	* 1. Calls {@link McBase} to establish the target reference and auto-attach listeners.
 	* 2. If `static tag` is set and differs from the current element, replaces the target
 	*    with a new built-in element (or removes it if `tag === ''`).
-	* 3. If `static assets` has entries, initiates asynchronous loading, fires an `'assets'` event when complete handled by `oneAssets(ev)`.
-	* 4. Applies any `static attributes` to the target element.
+	* 3. Applies any `static attributes` to the target element.
+	* 4. Loads `static assets` (inlined in a bundled build, fetched in dev/autoload),
+	*    applies the auto-attached ones to the target, then fires the `Init` lifecycle
+	*    event — so `oneInit()` runs with the assets loaded and readable via {@link DC.assets}.
 	*
 	* @param target - The host DOM element this component operates on.
 	*/
@@ -1293,43 +1375,24 @@ var DC = class DC extends McBase {
 		if (ctor.attributes) Object.keys(ctor.attributes).forEach((key) => {
 			this.target.setAttribute(key, attributes[key]);
 		});
-		const that = this;
-		const remainingAssets = ctor.assets.filter((key) => !ctor._assets[key]);
-		if (Object.keys(ctor._assets).length) processAssets(this, ctor._assets);
-		if (remainingAssets.length) {
-			if (!ctor._assetsPromise) ctor._assetsPromise = loadAssets(ctor._originalTag || tagName, remainingAssets).then((res) => {
-				const loadedAssets = {};
-				remainingAssets.forEach((key, i) => {
-					loadedAssets[key] = res[i];
-				});
-				ctor._assets = Object.assign({}, ctor._assets, loadedAssets);
-				for (const onceKey of ["css", "targetCss"]) if (loadedAssets[onceKey] !== void 0) delete ctor._assets[onceKey];
-				ctor.assets = ctor.assets.filter((key) => key !== "css" && key !== "targetCss");
-				return loadedAssets;
-			});
-			ctor._assetsPromise.then((loadedAssets) => {
-				processAssets(this, loadedAssets);
-				that.trigger("assets", ctor._assets);
-			});
-		} else if ([...Object.keys(ctor._assets)].length) queueMicrotask(() => that.trigger("assets", ctor._assets));
+		if (Object.keys(ctor._assets).length) {
+			processAssets(this, ctor._assets);
+			for (const onceKey of ["css", "targetCss"]) delete ctor._assets[onceKey];
+			ctor.assets = ctor.assets.filter((key) => key !== "css" && key !== "targetCss");
+		}
+		if (ctor._assetsPromise) ctor._assetsPromise.then((loadedAssets) => {
+			processAssets(this, loadedAssets);
+			for (const onceKey of ["css", "targetCss"]) delete ctor._assets[onceKey];
+			ctor.assets = ctor.assets.filter((key) => key !== "css" && key !== "targetCss");
+			init(this);
+		});
+		else init(this);
 		if (ctor.tag === "") {
 			this.target.remove();
 			return;
 		}
 	}
 	/**
-	Returns the loaded assets for this component instance.
-	
-	Assets are loaded asynchronously when `static assets` is defined on the class.
-	This method returns the resolved asset map keyed by filename, or `undefined`
-	if assets have not yet been loaded.
-	
-	@returns A record mapping asset keys to their content strings, or undefined.
-	*/
-	getAssets() {
-		return this.constructor._assets || {};
-	}
-	/**
 	Static helper to attach a microcomponent instance to a DOM element.
 	
 	Wrapper around the `add()` utility function, providing a class-level API
@@ -2033,7 +2096,7 @@ observePlugin(DC);
 class Counter extends DC {
 data = { clicks: 1 };
 
-oneAssets() {
+oneInit() {
 this
 .subscribe('data', (v) => console.log('data →', v))
 .bind('data', this.target);
@@ -2416,7 +2479,7 @@ subsequent calls are no-ops.
 class Counter extends DC {
 data = { clicks: 1 };
 
-oneAssets() {
+oneInit() {
 this
 .subscribe('data', (v) => console.log('data →', v))
 .bind('data', this.target);
@@ -2512,7 +2575,7 @@ formValuePlugin(DC);
 class CheckoutForm extends DC {
 static assets = ['targetHtml'];
 
-oneAssets() {
+oneInit() {
 this
 .formValues(this.target, 'formData')
 .subscribe('formData', (data) => console.log(data))
@@ -2800,7 +2863,7 @@ import { DC, defineCE, formValues } from '@twobirds/microcomponents';
 class MyForm extends DC {
 static assets = ['targetHtml'];
 
-oneAssets() {
+oneInit() {
 formValues(this, 'formData', this.target);
 this.formData.subscribe((data) => console.log('form changed:', data));
 }
@@ -2845,7 +2908,7 @@ formValuePlugin(DC);
 class CheckoutForm extends DC {
 static assets = ['targetHtml'];
 
-oneAssets() {
+oneInit() {
 this
 .formValues(this.target, 'formData')
 .subscribe('formData', (data) => console.log(data))
@@ -2879,4 +2942,4 @@ formValues: function(target, propName) {
 	} });
 }
 //#endregion
-export { BubbleController, DC, MC, McBase, autoload, bindTemplateEvents, copyGettersSetters, debounce, deepEqual, defineCE, flattenObject, formValuePlugin, formValues, getCE, getMcEventName, htmlToElements, injectCSS, isAlreadyObserved, isBrowser, isMcHost, isNativeObject, kebabToPascal, listCE, loadAssets, nameSpace, observe, observePlugin, off, on, one, parse, processAssets, sortObject, trigger, trueEventName };
+export { BubbleController, DC, MC, McBase, autoload, bindTemplateEvents, copyGettersSetters, debounce, deepEqual, defineCE, flattenObject, formValuePlugin, formValues, getCE, getMcEventName, htmlToElements, injectCSS, isAlreadyObserved, isBrowser, isMcHost, isNativeObject, kebabToPascal, listCE, loadAssets, nameSpace, observe, observePlugin, off, on, one, parse, pascalToKebab, processAssets, sortObject, trigger, trueEventName };

package/dist/microcomponents.min.js

@@ -1 +1 @@
-function e(e){return`_mc`+e[0].toUpperCase()+e.substring(1)}function t(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function n(e,r,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>n(e,r,i));return}e.removeEventListener(t(e,r),i)}}function r(e,n,i,a=!1){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,n,i));return}return e.addEventListener(t(e,n),i,{capture:!1,once:a}),i}}function i(e,t,n){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>i(e,t,n));return}return r(e,t,n,!0),n}}var a=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function o(e,n,r={},i=`l`,s){if(!e)return;if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>o(e,n,r,i));return}let c=/^_mc/.test(n)?n:t(e,n),l=s||new a,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(i)&&(e.dispatchEvent(u),l.stopped)||/[ud]/.test(i)&&queueMicrotask(()=>{if(i.indexOf(`u`)>-1&&o(e.parentElement,c,r,`lu`,l),i.indexOf(`d`)>-1)for(let t of e.children)o(t,c,r,`ld`)})}function s(){return typeof window<`u`&&window.document!==void 0}function c(e){return typeof e==`object`&&!!e&&e.constructor===Object}function l(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];c(a)?t[i]=l(a):t[i]=a}return t}function u(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=u(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?l(n):n}function d(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!d(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!d(n[t],r[t]))return!1}return!0}function f(e,t={}){let n=t,r=typeof e==`string`?e.split(`.`):e;if(!(!n||!r[0]||!n[r[0]])){if(r.length>1){let e=n[r[0]];return c(e)?f(r.slice(1),e):void 0}return n[r[0]]}}function p(e,t,...n){let r=[e,t,...n];if(r.length>2){for(;r.length>1;)r[0]=p(r[0],r[1]),r.splice(1,1);return r[0]}if(typeof e==`string`){let n=e;return e.match(/\{[^\{\}]*\}/g)?.forEach(e=>{let r=f(e.substring(1,e.length-1),t);r!==void 0&&(n=n.replace(e,String(r)))}),n}else if(c(e)){let n=e;Object.keys(n).forEach(e=>{Object.prototype.hasOwnProperty.call(n,e)&&(n[e]=p(n[e],t))})}return e}function m(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function h(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>{e(...r)},t)}}function ee(e){let t=document.createElement(`template`);return e=e.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,`<$1$2></$1>`),t.innerHTML=e,t.content.normalize(),Array.from(t.content.childNodes)}function g(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var _=new WeakMap;function v(e,t){let n=_.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),_.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function y(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:v(document,t[i]);break;case`targetCss`:v(document,t[i]);break;case`shadowCss`:v(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],x(r,e);break;case`targetHtml`:n.innerHTML=t[i],x(n,e);break}})}function b(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function x(e,t){let n=[...e.querySelectorAll(`*`)];for(let e of n){if(!(e instanceof HTMLElement))continue;let n=[...e.attributes];for(let i of n){let n=i.name.toLowerCase();if(!(`on`+n in e))continue;let a=i.value.trim().split(`|`);if(a.length<2)continue;let[s,c,l]=a;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?r(e,n,()=>t.trigger(c,u)):r(e,n,()=>o(s,c,u))}}}function S(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function C(e,t,n={}){let r=e;`_mc`in e||(r._mc=new O(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function te(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function ne(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function w(e){let t=e.target,n=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(n).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof n[e]==`function`);for(let e of a){let n=/^one/.test(e);r(t,e.replace(/^one?/,``),t=>i[e](t),n)}}function T(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function E(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var D=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof O&&this.constructor!==O){w(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&ne(this)}}get target(){return this._target.deref()}},re=class extends D{constructor(e){super(e)}},O=class e extends D{static tag;static _assets={};static assets=[];static _assetsPromise;static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=this,o=n.assets.filter(e=>!n._assets[e]);if(Object.keys(n._assets).length&&y(this,n._assets),o.length?(n._assetsPromise||=b(n._originalTag||r,o).then(e=>{let t={};o.forEach((n,r)=>{t[n]=e[r]}),n._assets=Object.assign({},n._assets,t);for(let e of[`css`,`targetCss`])t[e]!==void 0&&delete n._assets[e];return n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),t}),n._assetsPromise.then(e=>{y(this,e),a.trigger(`assets`,n._assets)})):[...Object.keys(n._assets)].length&&queueMicrotask(()=>a.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return C(e,t,n)}static remove(e,t){te(e,t)}static get(e,t,n){if(!S(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,t){n(this.target,e,t)}on(e,t){return r(this.target,e,t)}one(e,t){return i(this.target,e,t)}trigger(e,t={},n=`l`,r){o(this.target,e,t,n,r)}ancestors(e){let t=[],n=E(this.target,e);for(;n;)t.push(n),n=E(n.target,e);return t}closest(e){return E(this.target,e)}children(e){let t=T(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function k(e){return e.split(`-`).join(`/`)}function A(e){return`./`+k(e)+`.js`}var j=new Set;function M(e){return()=>{let t=Array.from(document.querySelectorAll(`[data-mc*="${e}"]`)).filter(e=>e instanceof HTMLElement);if(t.length===0)return;let n=customElements.get(e);for(let r of t){try{O.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!S(e))throw`create() of Class ${n.name} did not return a McHost.`;e.setAttribute(`data-mc`,r.getAttribute(`data-mc`)??``),r.replaceWith(e),r=e}else throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`}let t=r.getAttribute(`data-mc`).split(` `).filter(t=>t!==e&&t!==``).join(` `).trim();r.setAttribute(`data-mc`,t)}}}function N(e){if(j.has(e))return;j.add(e);let t=A(e),n=document.createElement(`script`);n.setAttribute(`src`,t),n.setAttribute(`blocking`,`render`),n.async=!0,n.setAttribute(`type`,`module`),n.setAttribute(`data-name`,e),n.setAttribute(`loading`,``),customElements.whenDefined(e).then(M(e)),n.addEventListener(`load`,t=>{j.delete(e),document.head.querySelector(`script[data-name="${e}"]`)?.remove()}),n.addEventListener(`error`,e=>{console.error(`could not load DC code from`,t)}),document.head.append(n)}function P(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!j.has(e.tagName.toLowerCase())).forEach(e=>{N(e.tagName.toLowerCase())}),[...document.querySelectorAll(`[data-mc]:not([data-mc=""]`)].filter(e=>!!e).forEach(e=>{(e.getAttribute(`data-mc`)?.split(` `).filter(e=>e!==``))?.forEach(e=>{let t=customElements.get(e);!j.has(e)&&!t?N(e):t&&M(e)()})})}var F=null;function I(e=!0){return e?F?!0:(F=new MutationObserver(P),setTimeout(()=>{F.observe(document.body,{childList:!0,subtree:!0}),P()},5),window.autoload??=I,!0):(F&&=(F.disconnect(),null),!1)}I.state=j;function ie(e,t){return Object.defineProperty(t,"name",{value:e})}function ae(e){return class extends e{constructor(...e){super(...e)}}}function L(e,t,n=[],r){if(customElements.get(e)){console.warn(`IGNORED: Custom element "${e}" is already defined!`);return}if(!e.includes(`-`))throw Error(`createCustomElement: tagName must contain at least one hyphen ("-").`);let i=HTMLElement;r&&(i=document.createElement(r).constructor);let a=m(e);if(!(t.prototype instanceof D))return customElements.define(e,t),t;let o=ie(a,class extends ae(i){constructor(e){super(),O.add(this,a,new t(this,e))}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(e,t,n){this.dispatchEvent(new CustomEvent(`_mcAttributeChanged`,{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent(`_mcFormReset`))}static get observedAttributes(){return[...n]}});return customElements.define(e,o,{extends:r}),L.list||=[],L.list.push(e),o}function R(e){return customElements.get(e)}function z(){return L.list??[]}function B(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var V=[`INPUT`,`SELECT`,`TEXTAREA`],H=class extends O{data={};oldDisplay=``;constructor(e){super(e),B(e).forEach(e=>this.data[e]=``),X(this),this.#e()}#e(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)),r=e.getAttribute(t)??``;this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(r))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=n.nodeValue??``,i=new Set(r.match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>r=>{let a=t;i.forEach(e=>{a=a.replace(e,String(r[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(r)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!V.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function U(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!B(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function W(e){U(e).forEach(e=>{e?._mc?._placeholders||O.add(e,`_placeholders`,new H(e))})}function G(e){return typeof e==`object`&&!!e}var K={};function q(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],G(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(s()){if(G(this.valueOf())){W(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=u(e);t.forEach(e=>{e&&o(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=G(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return K[n]=r,r}function J(e){return K[e.constructor.name]||q(e)}function Y(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function X(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!Y(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(J(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(G(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){d(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(G(a.valueOf())&&!(a.valueOf()instanceof Array))Y(a)||(a=new(J(e))(structuredClone(Object.assign({},e))),g(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(J(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function Z(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];Y(n)||X(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}Z(O);var oe=e=>e.tagName.toLowerCase(),Q=class{constructor(e){}},se=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]];t.filter(t=>t.getAttribute(`value`)===e).shift().checked=!0}},ce=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},le=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},ue=class extends Q{#e;#t=!1;constructor(e){super(e),this.#e=e,this.#t=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#t?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},de=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},fe=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(oe(e)){case`input`:switch(e.type){case`radio`:r=new se(e);break;case`checkbox`:r=new ce(e);break;default:r=new le(e)}break;case`select`:r=new ue(e);break;case`textarea`:r=new de(e);break}if(r){let i=r;O.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function $(e,t,n){if(!s())return;let r=fe(n),i=e;i[t]=Object.assign({},r),X(e,t);let a=i[t];g(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function pe(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return $(this,t,e),this}})}export{a as BubbleController,O as DC,re as MC,D as McBase,I as autoload,x as bindTemplateEvents,g as copyGettersSetters,h as debounce,d as deepEqual,L as defineCE,u as flattenObject,pe as formValuePlugin,$ as formValues,R as getCE,e as getMcEventName,ee as htmlToElements,v as injectCSS,Y as isAlreadyObserved,s as isBrowser,S as isMcHost,c as isNativeObject,m as kebabToPascal,z as listCE,b as loadAssets,f as nameSpace,X as observe,Z as observePlugin,n as off,r as on,i as one,p as parse,y as processAssets,l as sortObject,o as trigger,t as trueEventName};
+function e(e){return`_mc`+e[0].toUpperCase()+e.substring(1)}function t(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function n(e,r,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>n(e,r,i));return}e.removeEventListener(t(e,r),i)}}function r(e,n,i,a=!1){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,n,i));return}return e.addEventListener(t(e,n),i,{capture:!1,once:a}),i}}function i(e,t,n){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>i(e,t,n));return}return r(e,t,n,!0),n}}var a=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function o(e,n,r={},i=`l`,s){if(!e)return;if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>o(e,n,r,i));return}let c=/^_mc/.test(n)?n:t(e,n),l=s||new a,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(i)&&(e.dispatchEvent(u),l.stopped)||/[ud]/.test(i)&&queueMicrotask(()=>{if(i.indexOf(`u`)>-1&&o(e.parentElement,c,r,`lu`,l),i.indexOf(`d`)>-1)for(let t of e.children)o(t,c,r,`ld`)})}function s(){return typeof window<`u`&&window.document!==void 0}function c(e){return typeof e==`object`&&!!e&&e.constructor===Object}function l(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];c(a)?t[i]=l(a):t[i]=a}return t}function u(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=u(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?l(n):n}function d(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!d(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!d(n[t],r[t]))return!1}return!0}function f(e,t={}){let n=t,r=typeof e==`string`?e.split(`.`):e;if(!(!n||!r[0]||!n[r[0]])){if(r.length>1){let e=n[r[0]];return c(e)?f(r.slice(1),e):void 0}return n[r[0]]}}function p(e,t,...n){let r=[e,t,...n];if(r.length>2){for(;r.length>1;)r[0]=p(r[0],r[1]),r.splice(1,1);return r[0]}if(typeof e==`string`){let n=e;return e.match(/\{[^\{\}]*\}/g)?.forEach(e=>{let r=f(e.substring(1,e.length-1),t);r!==void 0&&(n=n.replace(e,String(r)))}),n}else if(c(e)){let n=e;Object.keys(n).forEach(e=>{Object.prototype.hasOwnProperty.call(n,e)&&(n[e]=p(n[e],t))})}return e}function m(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function h(e){return e.replace(/[A-Z]/g,(e,t)=>(t?`-`:``)+e.toLowerCase())}function ee(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>{e(...r)},t)}}function te(e){let t=document.createElement(`template`);return e=e.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,`<$1$2></$1>`),t.innerHTML=e,t.content.normalize(),Array.from(t.content.childNodes)}function g(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var _=new WeakMap;function v(e,t){let n=_.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),_.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function y(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:v(document,t[i]);break;case`targetCss`:v(document,t[i]);break;case`shadowCss`:v(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],x(r,e);break;case`targetHtml`:n.innerHTML=t[i],x(n,e);break}})}function b(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function x(e,t){let n=[...e.querySelectorAll(`*`)];for(let e of n){if(!(e instanceof HTMLElement))continue;let n=[...e.attributes];for(let i of n){let n=i.name.toLowerCase();if(!(`on`+n in e))continue;let a=i.value.trim().split(`|`);if(a.length<2)continue;let[s,c,l]=a;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?r(e,n,()=>t.trigger(c,u)):r(e,n,()=>o(s,c,u))}}}function S(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function C(e,t,n={}){let r=e;`_mc`in e||(r._mc=new k(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function w(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function T(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function ne(e){let t=e.target,n=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(n).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof n[e]==`function`);for(let e of a){let n=/^one/.test(e);r(t,e.replace(/^one?/,``),t=>i[e](t),n)}}function E(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function D(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var O=class{_target;static _assets={};static assets=[];static _assetsPromise;constructor(e){this._target=new WeakRef(e||{});let t=this.constructor;this instanceof k&&this.constructor!==k&&ne(this);let n=(t.assets??[]).filter(e=>!t._assets[e]);n.length&&!t._assetsPromise&&(t._assetsPromise=b(t._originalTag||(this instanceof k?this.target.tagName.toLowerCase():h(t.name)),n).then(e=>{let r={};return n.forEach((t,n)=>{r[t]=e[n]}),t._assets=Object.assign({},t._assets,r),r}))}get target(){return this._target.deref()}get assets(){return this.constructor._assets||{}}},re=class extends O{constructor(e){super(e)}},k=class e extends O{static tag;static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;if(n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])}),Object.keys(n._assets).length){y(this,n._assets);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`)}if(n._assetsPromise?n._assetsPromise.then(e=>{y(this,e);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),T(this)}):T(this),n.tag===``){this.target.remove();return}}static add(e,t,n={}){return C(e,t,n)}static remove(e,t){w(e,t)}static get(e,t,n){if(!S(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,t){n(this.target,e,t)}on(e,t){return r(this.target,e,t)}one(e,t){return i(this.target,e,t)}trigger(e,t={},n=`l`,r){o(this.target,e,t,n,r)}ancestors(e){let t=[],n=D(this.target,e);for(;n;)t.push(n),n=D(n.target,e);return t}closest(e){return D(this.target,e)}children(e){let t=E(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function ie(e){return e.split(`-`).join(`/`)}function A(e){return`./`+ie(e)+`.js`}var j=new Set;function M(e){return()=>{let t=Array.from(document.querySelectorAll(`[data-mc*="${e}"]`)).filter(e=>e instanceof HTMLElement);if(t.length===0)return;let n=customElements.get(e);for(let r of t){try{k.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!S(e))throw`create() of Class ${n.name} did not return a McHost.`;e.setAttribute(`data-mc`,r.getAttribute(`data-mc`)??``),r.replaceWith(e),r=e}else throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`}let t=r.getAttribute(`data-mc`).split(` `).filter(t=>t!==e&&t!==``).join(` `).trim();r.setAttribute(`data-mc`,t)}}}function N(e){if(j.has(e))return;j.add(e);let t=A(e),n=document.createElement(`script`);n.setAttribute(`src`,t),n.setAttribute(`blocking`,`render`),n.async=!0,n.setAttribute(`type`,`module`),n.setAttribute(`data-name`,e),n.setAttribute(`loading`,``),customElements.whenDefined(e).then(M(e)),n.addEventListener(`load`,t=>{j.delete(e),document.head.querySelector(`script[data-name="${e}"]`)?.remove()}),n.addEventListener(`error`,e=>{console.error(`could not load DC code from`,t)}),document.head.append(n)}function P(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!j.has(e.tagName.toLowerCase())).forEach(e=>{N(e.tagName.toLowerCase())}),[...document.querySelectorAll(`[data-mc]:not([data-mc=""]`)].filter(e=>!!e).forEach(e=>{(e.getAttribute(`data-mc`)?.split(` `).filter(e=>e!==``))?.forEach(e=>{let t=customElements.get(e);!j.has(e)&&!t?N(e):t&&M(e)()})})}var F=null;function I(e=!0){return e?F?!0:(F=new MutationObserver(P),setTimeout(()=>{F.observe(document.body,{childList:!0,subtree:!0}),P()},5),window.autoload??=I,!0):(F&&=(F.disconnect(),null),!1)}I.state=j;function ae(e,t){return Object.defineProperty(t,"name",{value:e})}function oe(e){return class extends e{constructor(...e){super(...e)}}}function L(e,t,n=[],r){if(customElements.get(e)){console.warn(`IGNORED: Custom element "${e}" is already defined!`);return}if(!e.includes(`-`))throw Error(`createCustomElement: tagName must contain at least one hyphen ("-").`);let i=HTMLElement;r&&(i=document.createElement(r).constructor);let a=m(e);if(!(t.prototype instanceof O))return customElements.define(e,t),t;let o=ae(a,class extends oe(i){constructor(e){super(),k.add(this,a,new t(this,e))}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(e,t,n){this.dispatchEvent(new CustomEvent(`_mcAttributeChanged`,{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent(`_mcFormReset`))}static get observedAttributes(){return[...n]}});return customElements.define(e,o,{extends:r}),L.list||=[],L.list.push(e),o}function R(e){return customElements.get(e)}function z(){return L.list??[]}function B(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var V=[`INPUT`,`SELECT`,`TEXTAREA`],H=class extends k{data={};oldDisplay=``;constructor(e){super(e),B(e).forEach(e=>this.data[e]=``),Y(this),this.#e()}#e(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)),r=e.getAttribute(t)??``;this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(r))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=n.nodeValue??``,i=new Set(r.match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>r=>{let a=t;i.forEach(e=>{a=a.replace(e,String(r[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(r)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!V.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function U(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!B(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function W(e){U(e).forEach(e=>{e?._mc?._placeholders||k.add(e,`_placeholders`,new H(e))})}function G(e){return typeof e==`object`&&!!e}var K={};function se(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],G(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(s()){if(G(this.valueOf())){W(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=u(e);t.forEach(e=>{e&&o(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=G(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return K[n]=r,r}function q(e){return K[e.constructor.name]||se(e)}function J(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function Y(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!J(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(q(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(G(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){d(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(G(a.valueOf())&&!(a.valueOf()instanceof Array))J(a)||(a=new(q(e))(structuredClone(Object.assign({},e))),g(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(q(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function X(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];J(n)||Y(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}X(k);var Z=e=>e.tagName.toLowerCase(),Q=class{constructor(e){}},ce=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]];t.filter(t=>t.getAttribute(`value`)===e).shift().checked=!0}},le=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},ue=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},de=class extends Q{#e;#t=!1;constructor(e){super(e),this.#e=e,this.#t=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#t?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},fe=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},pe=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(Z(e)){case`input`:switch(e.type){case`radio`:r=new ce(e);break;case`checkbox`:r=new le(e);break;default:r=new ue(e)}break;case`select`:r=new de(e);break;case`textarea`:r=new fe(e);break}if(r){let i=r;k.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function $(e,t,n){if(!s())return;let r=pe(n),i=e;i[t]=Object.assign({},r),Y(e,t);let a=i[t];g(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function me(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return $(this,t,e),this}})}export{a as BubbleController,k as DC,re as MC,O as McBase,I as autoload,x as bindTemplateEvents,g as copyGettersSetters,ee as debounce,d as deepEqual,L as defineCE,u as flattenObject,me as formValuePlugin,$ as formValues,R as getCE,e as getMcEventName,te as htmlToElements,v as injectCSS,J as isAlreadyObserved,s as isBrowser,S as isMcHost,c as isNativeObject,m as kebabToPascal,z as listCE,b as loadAssets,f as nameSpace,Y as observe,X as observePlugin,n as off,r as on,i as one,p as parse,h as pascalToKebab,y as processAssets,l as sortObject,o as trigger,t as trueEventName};

package/dist/observables.min.js

@@ -1 +1 @@
-function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(){return typeof window<`u`&&window.document!==void 0}function s(e){return typeof e==`object`&&!!e&&e.constructor===Object}function c(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];s(a)?t[i]=c(a):t[i]=a}return t}function l(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=l(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?c(n):n}function u(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!u(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!u(n[t],r[t]))return!1}return!0}function d(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var f=new WeakMap;function p(e,t){let n=f.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),f.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function m(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:p(document,t[i]);break;case`targetCss`:p(document,t[i]);break;case`shadowCss`:p(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],g(r,e);break;case`targetHtml`:n.innerHTML=t[i],g(n,e);break}})}function h(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function g(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function _(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function v(e,t,n={}){let r=e;`_mc`in e||(r._mc=new T(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function y(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function b(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function x(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function S(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function C(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var w=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof T&&this.constructor!==T){x(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&b(this)}}get target(){return this._target.deref()}},T=class e extends w{static tag;static _assets={};static assets=[];static _assetsPromise;static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=this,o=n.assets.filter(e=>!n._assets[e]);if(Object.keys(n._assets).length&&m(this,n._assets),o.length?(n._assetsPromise||=h(n._originalTag||r,o).then(e=>{let t={};o.forEach((n,r)=>{t[n]=e[r]}),n._assets=Object.assign({},n._assets,t);for(let e of[`css`,`targetCss`])t[e]!==void 0&&delete n._assets[e];return n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),t}),n._assetsPromise.then(e=>{m(this,e),a.trigger(`assets`,n._assets)})):[...Object.keys(n._assets)].length&&queueMicrotask(()=>a.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return v(e,t,n)}static remove(e,t){y(e,t)}static get(e,t,n){if(!_(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=C(this.target,e);for(;n;)t.push(n),n=C(n.target,e);return t}closest(e){return C(this.target,e)}children(e){let t=S(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function E(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var D=[`INPUT`,`SELECT`,`TEXTAREA`],O=class extends T{data={};oldDisplay=``;constructor(e){super(e),E(e).forEach(e=>this.data[e]=``),I(this),this.#e()}#e(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)),r=e.getAttribute(t)??``;this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(r))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=n.nodeValue??``,i=new Set(r.match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>r=>{let a=t;i.forEach(e=>{a=a.replace(e,String(r[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(r)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!D.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function k(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!E(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function A(e){k(e).forEach(e=>{e?._mc?._placeholders||T.add(e,`_placeholders`,new O(e))})}function j(e){return typeof e==`object`&&!!e}var M={};function N(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],j(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(o()){if(j(this.valueOf())){A(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=l(e);t.forEach(e=>{e&&a(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=j(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return M[n]=r,r}function P(e){return M[e.constructor.name]||N(e)}function F(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function I(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!F(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(P(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(j(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){u(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(j(a.valueOf())&&!(a.valueOf()instanceof Array))F(a)||(a=new(P(e))(structuredClone(Object.assign({},e))),d(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(P(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function L(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];F(n)||I(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}export{F as isAlreadyObserved,I as observe,L as observePlugin};
+function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(){return typeof window<`u`&&window.document!==void 0}function s(e){return typeof e==`object`&&!!e&&e.constructor===Object}function c(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];s(a)?t[i]=c(a):t[i]=a}return t}function l(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=l(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?c(n):n}function u(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!u(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!u(n[t],r[t]))return!1}return!0}function d(e){return e.replace(/[A-Z]/g,(e,t)=>(t?`-`:``)+e.toLowerCase())}function f(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var p=new WeakMap;function m(e,t){let n=p.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),p.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function h(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:m(document,t[i]);break;case`targetCss`:m(document,t[i]);break;case`shadowCss`:m(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],_(r,e);break;case`targetHtml`:n.innerHTML=t[i],_(n,e);break}})}function g(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function _(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function v(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function y(e,t,n={}){let r=e;`_mc`in e||(r._mc=new E(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function b(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function x(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function S(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function C(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function w(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var T=class{_target;static _assets={};static assets=[];static _assetsPromise;constructor(e){this._target=new WeakRef(e||{});let t=this.constructor;this instanceof E&&this.constructor!==E&&S(this);let n=(t.assets??[]).filter(e=>!t._assets[e]);n.length&&!t._assetsPromise&&(t._assetsPromise=g(t._originalTag||(this instanceof E?this.target.tagName.toLowerCase():d(t.name)),n).then(e=>{let r={};return n.forEach((t,n)=>{r[t]=e[n]}),t._assets=Object.assign({},t._assets,r),r}))}get target(){return this._target.deref()}get assets(){return this.constructor._assets||{}}},E=class e extends T{static tag;static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;if(n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])}),Object.keys(n._assets).length){h(this,n._assets);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`)}if(n._assetsPromise?n._assetsPromise.then(e=>{h(this,e);for(let e of[`css`,`targetCss`])delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),x(this)}):x(this),n.tag===``){this.target.remove();return}}static add(e,t,n={}){return y(e,t,n)}static remove(e,t){b(e,t)}static get(e,t,n){if(!v(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=w(this.target,e);for(;n;)t.push(n),n=w(n.target,e);return t}closest(e){return w(this.target,e)}children(e){let t=C(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function D(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var O=[`INPUT`,`SELECT`,`TEXTAREA`],k=class extends E{data={};oldDisplay=``;constructor(e){super(e),D(e).forEach(e=>this.data[e]=``),L(this),this.#e()}#e(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)),r=e.getAttribute(t)??``;this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(r))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=n.nodeValue??``,i=new Set(r.match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>r=>{let a=t;i.forEach(e=>{a=a.replace(e,String(r[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(r)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!O.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function A(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!D(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function j(e){A(e).forEach(e=>{e?._mc?._placeholders||E.add(e,`_placeholders`,new k(e))})}function M(e){return typeof e==`object`&&!!e}var N={};function P(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],M(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(o()){if(M(this.valueOf())){j(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=l(e);t.forEach(e=>{e&&a(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=M(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return N[n]=r,r}function F(e){return N[e.constructor.name]||P(e)}function I(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function L(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!I(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(F(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(M(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){u(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(M(a.valueOf())&&!(a.valueOf()instanceof Array))I(a)||(a=new(F(e))(structuredClone(Object.assign({},e))),f(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(F(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function R(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];I(n)||L(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}export{I as isAlreadyObserved,L as observe,R as observePlugin};

package/dist/state/formValues.d.ts

@@ -25,7 +25,7 @@ formValuePlugin(DC);
 class CheckoutForm extends DC {
     static assets = ['targetHtml'];
 
-    oneAssets() {
+    oneInit() {
         this
             .formValues(this.target, 'formData')
             .subscribe('formData', (data) => console.log(data))
@@ -83,7 +83,7 @@ import { DC, defineCE, formValues } from '@twobirds/microcomponents';
 class MyForm extends DC {
     static assets = ['targetHtml'];
 
-    oneAssets() {
+    oneInit() {
         formValues(this, 'formData', this.target);
         this.formData.subscribe((data) => console.log('form changed:', data));
     }
@@ -114,7 +114,7 @@ formValuePlugin(DC);
 class CheckoutForm extends DC {
     static assets = ['targetHtml'];
 
-    oneAssets() {
+    oneInit() {
         this
             .formValues(this.target, 'formData')
             .subscribe('formData', (data) => console.log(data))