@twobirds/microcomponents 0.2.2 → 0.2.4

package/README.md

@@ -1,4 +1,4 @@
-![logo](./MicroComponents.svg)
+![logo](https://twobirds.gitlab.io/microcomponents/MicroComponents.svg)
 
 ## MICRO COMPONENTS
 
@@ -16,7 +16,9 @@ The distinguishing feature - compared to other frameworks - is its **minimalism*
 
 **You work with one of the established frameworks?** You can still put this hands-on tool in your tool belt. You then have a plugin fallback solution for when your FW fails you or lacks functionality.
 
+---
 ## Status
+---
 
 Automatic tests added. Typedoc needs some work still.
 
@@ -28,12 +30,15 @@ Check the [typedoc API reference](https://twobirds.gitlab.io/microcomponents/typ
 
 The progress of coding is being streamed on [twitch](https://twitch.tv/frankieth) and [youtube](https://www.youtube.com/@FrankieThu).
 
-## Usage Examples
+## Examples
 
+---
 ### **Functional Principle**
 ---
 
-*The following code only shows how Micro Components are stored in the DOM.*
+- *The following code only shows the priciple: how Micro Components are stored in the DOM*
+
+- *Web Components / Custom Elements follow below*
 
 html before:
 
@@ -78,6 +83,7 @@ The `data-mc` **attribute** indicates that this **HTML element contains at least
 
 The `_mc` **property** is the only interference with the DOM, so any other system should be happy to work with this.
 
+---
 ### **Web Components / Custom Elements**
 ---
 
@@ -121,6 +127,7 @@ For more examples regarding web components, go to the [docs](https://twobirds.gi
 and check the loaded sources from the [demo shop](https://twobirds.gitlab.io/microcomponents/shop/index.html). 
 There is a lot to see...
 
+---
 ### **State and 1-way-binding**
 ---
 
@@ -128,6 +135,7 @@ Declare states and directly connect them to DOM placeholders:
 code:
 
 ```javascript
+observPlugin(DC);
 // create a custom micro component class
 class MyMC extends DC {
 	state = { text: 'Hello world!' };
@@ -135,19 +143,13 @@ class MyMC extends DC {
 	constructor(target) {
 		super(target);
 
-		// observe one property ...
-		observe(this, 'state');
-
-		// alternatively: observe all properties defined so far
-		// observe( this ); // omit property name
-
 		this.target.innerHTML = '{text}';
 
+		this
 		// one way binding
-		this.state.bind(target); // links the state to DOM placeholders
-
+		.bind( 'state', target );
 		// attach your own callbacks
-		this.state.subscribe((value) => {
+		.subscribe( 'state', (value) => {
 			console.log(value);
 		});
 
@@ -157,6 +159,7 @@ class MyMC extends DC {
 }
 ```
 
+---
 ### **Forms and 2-way-binding**
 ---
 
@@ -165,25 +168,37 @@ Similar to observables above, you can 2-way-bind an observable object to form in
 code:
 
 ```javascript
+formValuesPlugin(DC);
 // create a custom micro component class
+targetHtml = /*HTML*/ `
+<form>
+	<input name="textinput" value="Hallo Welt!"/>
+</form>
+`;
 class MyMC extends DC {
 	constructor(target) {
 		super(target);
 
-		this.target.innerHTML = /*HTML*/ `
-		<form>
-			<input name="textinput" value="Hallo Welt!"/>
-		</form>`;
+		this.target.innerHTML = targetHtml; 
 
+		this.formData = { text: '' };
+
+		this
 		// link the form property to the DOM input fields
-		formValues(this, 'form', this.target);
+		.formValues(target, 'formData')
+		.subscribe( 'formData', (form) => {
+			console.log(form); // the form data object
+		});
 
 		// now simply changing the form property will change the DOM input fields
-		this.form.textinput = 'Hallo Welt';
+		this.form.textinput = 'Hello World!';
+
+		// ... and editing the form input will change the 'form' property
 	}
 }
 ```
 
+---
 ### **Event Handlers**
 ---
 
@@ -208,12 +223,12 @@ class MyMC extends DC {
 		this.off('hover', onHoverHandler);
 	}
 
-	// this event handler is attached automatically
+	// this native event handler is attached automatically
 	onClick() {
 		console.log('HTMLElement clicked!');
 	}
 
-	// this event handler is attached automatically
+	// this native event handler is attached automatically
 	oneClick() {
 		console.log('HTMLElement clicked! ( only fires once )');
 	}
@@ -246,7 +261,9 @@ class MyMC extends DC {
 }
 ```
 
+---
 ## Goal
+---
 
 This code aims at improving Javascript modularity and encapsulation. Micro Components are built on **OOP** for structure, so you should embrace **DRY, KISS and SOLID** principles.
 
@@ -266,7 +283,9 @@ Most of all this system by design **allows for outsourcing without sharing the m
 
 Finally it allows for a clear distinction between `Junior`, `Senior` and `Architect` roles in a project. No more hiring junior programmers with 5 years experience in 50 tools under their belt. A junior in this system is somebody who likes HTML, CSS and JS/TS - nothing more. Teaching all of this system starting at zero takes 1 day. The rest is finger muscle memory and learning/knowing web standards.
 
+---
 ## Distinguishing Features
+---
 
 There are a few potentially unique aspects of this micro components system that might differentiate it from other framework or library:
 
@@ -282,7 +301,9 @@ There are a few potentially unique aspects of this micro components system that
 
 The strongest argument might be for developers who prefer OOP, want minimal framework lock-in, and need a lightweight solution that works well with existing code or other libraries.
 
+---
 ## Contact
+---
 
 Feel free to contact me for any questions or inquiries:
 
@@ -290,7 +311,9 @@ email [Frank Thürigen](mailto:fthuerigen@gmail.com?subject=Micro%20Components)
 
 You can [fund this](https://www.gofundme.com/f/nachhaltige-programmierung).
 
+---
 ## Disclaimer
+---
 
 I decided to extract this functionality from the [twoBirds framework](https://www.npmjs.com/package/twobirds-core), because it is a useful tool in itself and it is framework agnostic. It relies solely on the standard DOM and native javascript or typescript.
 
@@ -298,6 +321,8 @@ Later this will be backported into twoBirds as a dependency, and twoBirds will b
 
 **This is a massive undertaking.** MCs are just the foundation of what I do. I am about to dump [20+ years of javascript programming](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/magic.md?ref_type=heads#things-i-already-did-with-this-in-my-own-framework-twobirds-or-in-apps-that-i-developed-with-it) into open source libraries, so feel free to [fund this](https://www.gofundme.com/f/nachhaltige-programmierung). The better this is funded, the faster it will be done. Given enough resources, I will start a crowdfunded company that will develop a new open source ecosystem for javascript/typescript programming.
 
+---
 ## Deprecated test:
+---
 
 [manual testing](https://twobirds.gitlab.io/microcomponents/test/index.html) ( also a speed test).

package/dist/MC.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(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function s(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`:o(document,t[i]);break;case`targetCss`:o(document,t[i]);break;case`shadowCss`:o(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],l(r,e);break;case`targetHtml`:n.innerHTML=t[i],l(n,e);break}})}function c(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 l(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 u(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function d(e,t,n={}){let r=e;`_mc`in e||(r._mc=new y(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 f(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 p(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function m(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 h(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 g(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 _=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof y&&this.constructor!==y){m(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&p(this)}}get target(){return this._target.deref()}},v=class extends _{constructor(e){super(e)}},y=class e extends _{static tag;static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor,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),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}if(n.assets.length&&c(r,n.assets).then(e=>{let t=Object.fromEntries(n.assets.map((t,n)=>[t,e[n]]));s(this,t),this.trigger(`assets`,t)}),n.tag===``){this.target.remove();return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])})}static add(e,t,n={}){return d(e,t,n)}static remove(e,t){f(e,t)}static get(e,t,n){if(!u(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=g(this.target,e);for(;n;)t.push(n),n=g(n.target,e);return t}closest(e){return g(this.target,e)}children(e){let t=h(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)}};export{y as DC,v as MC,_ as McBase,u as isMcDOM};
+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(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function s(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`:o(document,t[i]);break;case`targetCss`:o(document,t[i]);break;case`shadowCss`:o(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],l(r,e);break;case`targetHtml`:n.innerHTML=t[i],l(n,e);break}})}function c(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 l(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 u(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function d(e,t,n={}){let r=e;`_mc`in e||(r._mc=new y(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 f(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 p(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function m(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 h(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 g(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 _=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof y&&this.constructor!==y){m(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&p(this)}}get target(){return this._target.deref()}},v=class extends _{constructor(e){super(e)}},y=class e extends _{static tag;static _assets={};static assets=[];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),e.add(t,n.name,new n(t)),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=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?s(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?c(r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),s(this,t),n._assets=Object.assign({},n._assets,t),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return d(e,t,n)}static remove(e,t){f(e,t)}static get(e,t,n){if(!u(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=g(this.target,e);for(;n;)t.push(n),n=g(n.target,e);return t}closest(e){return g(this.target,e)}children(e){let t=h(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)}};export{y as DC,v as MC,_ as McBase,u as isMcHost};

package/dist/autoload.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(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function s(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`:o(document,t[i]);break;case`targetCss`:o(document,t[i]);break;case`shadowCss`:o(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],l(r,e);break;case`targetHtml`:n.innerHTML=t[i],l(n,e);break}})}function c(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 l(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 u(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function d(e,t,n={}){let r=e;`_mc`in e||(r._mc=new v(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 f(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 p(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function m(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 h(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 g(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 _=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof v&&this.constructor!==v){m(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&p(this)}}get target(){return this._target.deref()}},v=class e extends _{static tag;static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor,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),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}if(n.assets.length&&c(r,n.assets).then(e=>{let t=Object.fromEntries(n.assets.map((t,n)=>[t,e[n]]));s(this,t),this.trigger(`assets`,t)}),n.tag===``){this.target.remove();return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])})}static add(e,t,n={}){return d(e,t,n)}static remove(e,t){f(e,t)}static get(e,t,n){if(!u(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=g(this.target,e);for(;n;)t.push(n),n=g(n.target,e);return t}closest(e){return g(this.target,e)}children(e){let t=h(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)}},y=new Set;function b(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{v.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!u(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 x(e){if(y.has(e))return;y.add(e);let t=`./`+e.split(`-`).join(`/`)+`.js`,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(b(e)),n.addEventListener(`load`,t=>{y.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 S(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!y.has(e.tagName.toLowerCase())).forEach(e=>{x(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);!y.has(e)&&!t?x(e):t&&b(e)()})})}var C=null,w=function(e=!0){return e?C?!0:(C=new MutationObserver(S),setTimeout(()=>{C.observe(document.body,{childList:!0,subtree:!0}),S()},5),window.autoload??=w,!0):(C&&=(C.disconnect(),null),!1)};w.state=y;export{w as autoload};
+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(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function s(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`:o(document,t[i]);break;case`targetCss`:o(document,t[i]);break;case`shadowCss`:o(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],l(r,e);break;case`targetHtml`:n.innerHTML=t[i],l(n,e);break}})}function c(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 l(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 u(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function d(e,t,n={}){let r=e;`_mc`in e||(r._mc=new v(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 f(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 p(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function m(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 h(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 g(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 _=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof v&&this.constructor!==v){m(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&p(this)}}get target(){return this._target.deref()}},v=class e extends _{static tag;static _assets={};static assets=[];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),e.add(t,n.name,new n(t)),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=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?s(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?c(r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),s(this,t),n._assets=Object.assign({},n._assets,t),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return d(e,t,n)}static remove(e,t){f(e,t)}static get(e,t,n){if(!u(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=g(this.target,e);for(;n;)t.push(n),n=g(n.target,e);return t}closest(e){return g(this.target,e)}children(e){let t=h(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)}},y=new Set;function b(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{v.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!u(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 x(e){if(y.has(e))return;y.add(e);let t=`./`+e.split(`-`).join(`/`)+`.js`,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(b(e)),n.addEventListener(`load`,t=>{y.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 S(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!y.has(e.tagName.toLowerCase())).forEach(e=>{x(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);!y.has(e)&&!t?x(e):t&&b(e)()})})}var C=null;function w(e=!0){return e?C?!0:(C=new MutationObserver(S),setTimeout(()=>{C.observe(document.body,{childList:!0,subtree:!0}),S()},5),window.autoload??=w,!0):(C&&=(C.disconnect(),null),!1)}w.state=y;export{w as autoload};