@twobirds/microcomponents 0.2.0 → 0.2.2

package/README.md

@@ -18,21 +18,22 @@ The distinguishing feature - compared to other frameworks - is its **minimalism*
 
 ## Status
 
-Automatic tests added.
+Automatic tests added. Typedoc needs some work still.
 
-[manual testing](https://twobirds.gitlab.io/microcomponents/test/index.html) ( also a speed test).
+[demo shop (on-demand loading)](https://twobirds.gitlab.io/microcomponents/shop/index.html) loads every component as a single file. Nice to check the code, it is readable.
 
-[demo shop (autoload enabled)](https://twobirds.gitlab.io/microcomponents/shop/index.html).
+[demo shop (bundled in one JS file)](https://twobirds.gitlab.io/microcomponents/shop/index-bundled.html). 9 kB including the library.
 
 Check the [typedoc API reference](https://twobirds.gitlab.io/microcomponents/typedoc/index.html) if you want to drill into the source code.
 
 The progress of coding is being streamed on [twitch](https://twitch.tv/frankieth) and [youtube](https://www.youtube.com/@FrankieThu).
 
-## Simple Usage Examples
+## Usage Examples
 
-### **Micro Components**
+### **Functional Principle**
+---
 
-**Hint:** The following code only shows how Micro Components are stored in the DOM.
+*The following code only shows how Micro Components are stored in the DOM.*
 
 html before:
 
@@ -57,13 +58,14 @@ class MyMC extends DC {
 // get some element from the DOM
 const element = document.querySelector('div');
 
-if (element) {
-	// Add the custom micro component instance to the target element
-	const host = DC.add(element, 'myMC', new MyMC(element));
+// Add the custom micro component instance to the target element programatically
+DC.add(element, 'myMC', new MyMC(element));
 
-	// Hello World
-	host._mc.myMC.helloWorld();
-}
+// Hello World
+element
+	._mc
+	.myMC
+	.helloWorld();
 ```
 
 html after:
@@ -77,8 +79,9 @@ 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**
+---
 
-You can define a custom element using a micro component as its primary functional instance. You are still free to add many more micro components at runtime.
+You can define a custom element using a micro component as its primary functional instance.  You are still free to add many more micro components to the custom element at runtime.
 
 code:
 
@@ -114,7 +117,12 @@ const body = document.body;
 body.append(new myComponentClass());
 ```
 
+For more examples regarding web components, go to the [docs](https://twobirds.gitlab.io/microcomponents/typedoc/modules/core_elements.html) 
+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**
+---
 
 Declare states and directly connect them to DOM placeholders:
 code:
@@ -150,6 +158,7 @@ class MyMC extends DC {
 ```
 
 ### **Forms and 2-way-binding**
+---
 
 Similar to observables above, you can 2-way-bind an observable object to form input fields. Changes in the object properties trigger input field changes and vice versa.
 
@@ -176,6 +185,7 @@ class MyMC extends DC {
 ```
 
 ### **Event Handlers**
+---
 
 #### Native Events
 
@@ -256,31 +266,6 @@ 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.
 
-## Documentation
-
-This repository exports 4 independent functionalities:
-
-1. **[Micro Components](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MC.md?ref_type=heads)** contains the **MC** and **DC** classes you can use as super classes.
-
-2. **[Elements](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/elements.md?ref_type=heads)** lets you define and use your own native web components. Uses (1).
-
-- [Basic Usage](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/elements.md?ref_type=heads#create-a-custom-element).
-- [Live Example](https://twobirds.gitlab.io/microcomponents/test/test.html)
-
-3. **[Observables](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/observables.md?ref_type=heads)** add **observability** and **run time type safety** to object properties. Also they provide **1-way binding** to placeholders in your template HTML.
-
-- [Basic Usage](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/observables.md?ref_type=heads#example)
-- [Live Example](https://twobirds.gitlab.io/microcomponents/test/test.html)
-
-4. **[Formvalues](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/formvalues.md?ref_type=heads)** gives you **2-way binding** between a HTML form and an observable object. Uses (3).
-
-- [Example Code](https://gitlab.com/twoBirds/microcomponents/-/blob/main/src/test/test/testform.ts?ref_type=heads)
-- [Live Example](https://twobirds.gitlab.io/microcomponents/test/test.html)
-
-Also there is a bundle file that contains all of the above.
-
-To see what can be done, go to [additional concepts](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/magic.md?ref_type=heads) which shows what it already has been used for.
-
 ## Distinguishing Features
 
 There are a few potentially unique aspects of this micro components system that might differentiate it from other framework or library:
@@ -312,3 +297,7 @@ I decided to extract this functionality from the [twoBirds framework](https://ww
 Later this will be backported into twoBirds as a dependency, and twoBirds will become completely modularized on the base of MCs.
 
 **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){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function s(e,t,n={}){let r=e;`_mc`in e||(r._mc=new h(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 c(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 l(e){queueMicrotask(()=>{e.trigger(`Init`)})}function u(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 d(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 f(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 p=class{_target;constructor(e){this._target=new WeakRef(e||{}),this instanceof h&&(u(this),l(this))}get target(){return this._target.deref()}},m=class extends p{constructor(e){super(e)}},h=class extends p{constructor(e){super(e)}static add(e,t,n={}){return s(e,t,n)}static remove(e,t){c(e,t)}static get(e,t,n){if(!o(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=f(this.target,e);for(;n;)t.push(n),n=f(n.target,e);return t}closest(e){return f(this.target,e)}children(e){let t=d(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{h as DC,m as MC,p as McBase,o 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 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};

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){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function s(e,t,n={}){let r=e;`_mc`in e||(r._mc=new m(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 c(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 l(e){queueMicrotask(()=>{e.trigger(`Init`)})}function u(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 d(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 f(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 p=class{_target;constructor(e){this._target=new WeakRef(e||{}),this instanceof m&&(u(this),l(this))}get target(){return this._target.deref()}},m=class extends p{constructor(e){super(e)}static add(e,t,n={}){return s(e,t,n)}static remove(e,t){c(e,t)}static get(e,t,n){if(!o(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=f(this.target,e);for(;n;)t.push(n),n=f(n.target,e);return t}closest(e){return f(this.target,e)}children(e){let t=d(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)}},h=new Set;function g(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{m.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!o(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 _(e){if(h.has(e))return;h.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(g(e)),n.addEventListener(`load`,t=>{h.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 v(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!h.has(e.tagName.toLowerCase())).forEach(e=>{_(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);!h.has(e)&&!t?_(e):t&&g(e)()})})}var y=null,b=function(e=!0){return e?y?!0:(y=new MutationObserver(v),setTimeout(()=>{y.observe(document.body,{childList:!0,subtree:!0}),v()},5),window.autoload??=b,!0):(y&&=(y.disconnect(),null),!1)};b.state=h;export{b 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 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};

package/dist/core/MC.d.ts

@@ -154,7 +154,7 @@ The `data-mc` attribute indicates that this element contains at least one microc
 ---
 
 */
-import { BubbleController } from './events.js';
+import { BubbleController } from '../utils/events.js';
 import type { BubbleDirections, McController, McEntriesOf, McEventHandler, McHost, McHostOf, McMerged, McPayloadOf, McRemoved } from '../types/mcTypes.js';
 export type { McBubbleController, McController, McDetail, McEntriesOf, McEvent, McEventHandler, McHost, McHostOf, McMerged, McNativeEventHandlers, McPayloadOf, McRemoved, } from '../types/mcTypes.js';
 export { isMcDOM } from './mcGuards.js';
@@ -232,6 +232,9 @@ class Cart extends DC<HTMLFormElement, { CartUpdate: { count: number } }> {
 ```
 */
 declare class DC<T extends HTMLElement = HTMLElement, EM extends Record<string, unknown> = Record<never, never>> extends McBase<T> implements McController<T> {
+    static tag?: string;
+    static assets: string[];
+    static attributes?: object;
     constructor(target: T);
     /**
     Static helper to attach a microcomponent instance to a DOM element.
@@ -338,7 +341,7 @@ declare class DC<T extends HTMLElement = HTMLElement, EM extends Record<string,
     @param bubble - Bubbling direction ('l', 'u', 'd' or combinations).
     @param controller - Optional controller for managing bubbling behavior.
     */
-    trigger<D = unknown, K extends string = string>(eventName: K, data?: McPayloadOf<EM, K, D>, bubble?: BubbleDirections, controller?: BubbleController): void;
+    trigger<D = unknown, K extends string = keyof EM & string>(eventName: K, data?: McPayloadOf<EM, K, D>, bubble?: BubbleDirections, controller?: BubbleController): void;
     /**
     Returns an array of all ancestor microcomponents up the DOM tree.
 

package/dist/core/MC.d.ts.map

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

package/dist/core/MC.js

@@ -155,7 +155,8 @@ The `data-mc` attribute indicates that this element contains at least one microc
 
 */
 'use strict';
-import { trigger, on, one, off } from './events.js';
+import { loadAssets, processAssets } from '../utils/helpers.js';
+import { trigger, on, one, off } from '../utils/events.js';
 import { isMcDOM } from './mcGuards.js';
 export { isMcDOM } from './mcGuards.js';
 function add(targetHTMLElement, key, element = {}) {
@@ -222,7 +223,7 @@ signature encodes that invariant instead of re-checking it at runtime.
 */
 function init(element) {
     queueMicrotask(() => {
-        element.trigger('Init');
+        element.trigger('Init', null);
     });
 }
 /**
@@ -304,9 +305,13 @@ class McBase {
     */
     constructor(target) {
         this._target = new WeakRef(target || {});
-        if (this instanceof DC) {
+        if (this instanceof DC && this.constructor !== DC) {
             autoAttachListeners(this);
-            init(this);
+            const tag = this.constructor.tag;
+            if (tag === undefined || tag.toUpperCase() === this.target.tagName) {
+                init(this);
+            }
+            ;
         }
     }
     /**
@@ -369,8 +374,51 @@ class Cart extends DC<HTMLFormElement, { CartUpdate: { count: number } }> {
 ```
 */
 class DC extends McBase {
+    static tag;
+    static assets = [];
+    static attributes = {};
     constructor(target) {
         super(target);
+        const ctor = this.constructor;
+        const tagName = this.target.tagName.toLowerCase();
+        // work on tag:
+        if (ctor['tag'] !== undefined && tagName !== ctor.tag && ctor.tag !== '') {
+            const element = document.createElement(ctor.tag);
+            element.classList.add(tagName);
+            DC.add(element, ctor.name, new ctor(element));
+            if (tagName.includes('-') && !this.target.isConnected) {
+                this.on('connected', () => this.target.replaceWith(element));
+            }
+            else {
+                this.target.replaceWith(element);
+            }
+            return;
+        }
+        // work on assets:
+        if (ctor.assets.length) {
+            // - initiate loading...
+            loadAssets(tagName, ctor.assets)
+                // - returns a promise, .then( ()=>{ this.trigger('render') } )
+                .then((res) => {
+                const assets = Object.fromEntries(ctor.assets.map((key, i) => [key, res[i]]));
+                processAssets(this, assets);
+                this.trigger('assets', assets);
+            });
+            // - in the component, have a method onRender(){ ... }
+            // - no explicit async needed in component code
+        }
+        if (ctor.tag === '') {
+            this.target.remove();
+            return;
+        }
+        ;
+        // work on attributes
+        const attributes = ctor.attributes;
+        if (ctor.attributes) {
+            Object.keys(ctor.attributes).forEach((key) => {
+                this.target.setAttribute(key, attributes[key]);
+            });
+        }
     }
     static add(target, key, element = {}) {
         return add(target, key, element);

package/dist/core/elements.d.ts

@@ -1,48 +1,217 @@
 /**
- * @module Web Components
- *
+ * # Custom Elements
+ * ---
  * Defines micro component integration with native web components and the CustomElementRegistry.
- *
  * This module provides utilities for defining custom HTML elements using the native Web Components API.
  *
  * ---
- *
  * The {@link defineCE} function handles registration of custom elements with the CustomElementRegistry,
  * automatically attaching the provided class as a DC instance ( micro component ) to the native web component created.
  * This class and any DC instances added to the web component later will receive all web component native events.
  * Only the class that defines the WC also defines its observed attributes, but all inner DCs get the changed event.
- *
  * The {@link getCE} function is just a wrapper for customElements.get()
  *
- * @example
+ * ## Hints:
+ * - Your micro component must extend DC, since it is a DOM element
+ * - Method names that look like event handlers are DOM - or custom event handlers ( 'onClick()', 'oneSomething()' )
+ * - Event handlers defined as methods will be assigned to the DOM automatically
+ * - Micro components trigger an `init` event on themself after the constructor has run. The method `.oneInit()` catches this lifecycle event.
  *
- * code:
- * ```javascript
- * // create a custom micro component class
- * class MyComponent extends DC{
+ * ---
  *
+ * @module elements
+ *
+ * ## Examples:
+ *
+ * @example define a custom component, minimum code
+ *
+ * javascript:
+ * ```javascript
+ * class MyElement extends DC {
  * 	constructor( target ){
- * 		super( target );
+ * 		super(target);
  * 	}
- *
  * }
  *
- * defineCE( 'my-component', MyComponent );
+ * defineCE( 'my-element', MyElement );
  * ```
  *
  * afterwards you can use ...
+ *
+ * html:
  * ```HTML
- * <my-component></my-component>
+ * <my-element></my-element>
  * ```
  * ... in your template.
  *
- * Or you can construct it programmatically:
+ * Or you can construct it programmatically using {@link getCE}:
+ *
+ * javascript:
  * ```javascript
- * const myComponentClass = getCE('my-component');
+ * const MyElementClass = getCE('my-element');
  * const body = document.body;
- * body.append( new myComponentClass() );
+ * body.append( new MyElementClass() );
+ * ```
+ *
+ * ---
+ * @example define a custom component with standard and/or custom event handlers
+ *
+ * javascript:
+ * ```javascript
+ * class MyElement extends DC {
+ *
+ * 	constructor( target ){
+ * 		super(target);
+ * 	}
+ *
+ * 	// DOM web component event handler
+ * 	onConnected() {
+ * 		this.innerHTML = '<p>Hi!</p>';
+ * 	}
+ *
+ * 	// DOM standard event handler
+ * 	onClick(){
+ * 		this.trigger('something', { data: 'do something' } );
+ * 	}
+ *
+ * 	// DOM custom event handler
+ * 	oneSomething(ev){
+ * 		// do only once! Subsequent clicks will not trigger this handler
+ * 		console.log('something happens here:', ev.detail.data );
+ * 	}
+ * }
+ * defineCE( 'my-element', MyElement );
+ * ```
+ *
+ * ## Static properties
+ *
+ * DC classes support some static properties that configure the custom element
+ * before any instance is constructed. These are applied automatically by `defineCE`
+ * during element creation.
+ *
+ * ---
+ * @example static tag
+ * - replaces the default `target` element with a semantic HTML element:
+ *
+ * html before:
+ * ```html
+ * <shop-header></shop-header>
+ * ```
+ * javascript:
+ * ```javascript
+ * class ShopHeader extends DC {
+ * 	static tag = 'header';
+ * 	constructor(target) {
+ * 		super(target);
+ * 	}
+ * }
+ * defineCE('shop-header', ShopHeader);
+ * ```
+ *
+ * html after:
+ * ```html
+ * <header></header>
+ * ```
+ *
+ * The resulting DOM node is a `<header>` element instead of a generic template.
+ *
+ * ---
+ * @example static assets
+ * - declares companion files for auto-load and bundling by convention:
+ *
+ * javascript:
+ * ```javascript
+ * class CartContainerCheckout extends DC {
+ * 	static assets = ['targetHtml', 'targetCss'];
+ * 	constructor(target) {
+ * 		super(target);
+ * 	}
+ * 	oneAssets() {
+ * 		this.setupBehaviour();
+ * 	}
+ * }
+ * defineCE('cart-container-checkout', CartContainerCheckout);
+ * ```
+ *
+ * The framework resolves `targetHtml` → `checkout.target.html` and
+ * `targetCss` → `checkout.target.css`, injects them into the element, and fires
+ * the `_mcAssets` event so that `oneAssets()` runs.
+ *
+ * ---
+ * @example static attributes
+ * - sets HTML attributes on every instance:
+ *
+ * javascript:
+ * ```javascript
+ * class ProductCard extends DC {
+ * 	static attributes = { role: 'listitem' };
+ * 	constructor(target, data) {
+ * 		super(target);
+ * 	}
+ * }
+ * defineCE('product-card', ProductCard);
+ * ```
+ *
+ * Every `<product-card>` element carries the attribute `role="listitem"` automatically:
+ *
+ * html after:
+ * ```html
+ * <product-card role="listitem"></product-card>
  * ```
+ *
  * ---
+ * @example
+ * - All three can be combined in one class:
+ *
+ * javascript:
+ * ```javascript
+ * class ShopCatalog extends DC {
+ * 	static tag = 'section';
+ * 	static attributes = { role: 'list', 'aria-label': 'products' };
+ * 	static assets = ['targetHtml', 'targetCss'];
+ * 	constructor(target) {
+ * 		super(target);
+ * 	}
+ * }
+ * defineCE('shop-catalog', ShopCatalog);
+ * ```
+ *
+ * Produces a `<section role="list" aria-label="products">` host element.
+ *
+ * ---
+ * @example Creating a user defined built-in element (customized built-in element)
+ * **Hint:**
+ * - This is **DEPRECATED** in the standard. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#customized_built-in_elements). Use this only if you know what you are doing.
+ * - This can be archieved in a safe way using the `static tag: 'aside';` property on your class.
+ *
+ * javascript:
+ * ```javascript
+ * class MyButton extends DC {
+ * 	constructor(target) {
+ * 		super(target);
+ * 	}
+ * 	onConnected() {
+ * 		this.textContent = 'Click me!';
+ * 	}
+ * }
+ * defineCE('my-button', MyButton, [], 'button');
+ * ```
+ *
+ * afterwards you can use it in your template with the `is` attribute:
+ *
+ * html:
+ * ```html
+ * <button is="my-button"></button>
+ * ```
+ *
+ *
+ * Or you can construct it programmatically using {@link getCE}:
+ * javascript:
+ * ```javascript
+ * const MyButtonClass = getCE('my-button');
+ * const body = document.body;
+ * body.append( new MyButtonClass() );
+ * ```
  */
 import { type McHost } from './MC.js';
 /**
@@ -120,89 +289,6 @@ the element instance with DC (DomComponent).
     tag name was already defined. Feed it (or an equivalent `McElementConstructor`) to
     the global {@link McElementTagNameMap} to make `getCE()` return it typed by string.
 
-@example define a custom component
-
----
-
-javascript:
-```javascript
-class MyElement extends DC {
-
-    constructor( target ){
-        super(target);
-    }
-
-    // DOM web component event handler
-    onConnected() {
-        this.innerHTML = '<p>Hi!</p>';
-    }
-    
-    // DOM standard event handler
-    onClick(){
-        this.trigger('something', { data: 'do something' } );
-    }
-    
-    // DOM custom event handler
-    oneSomething(ev){
-        // do only once! Subsequent clicks will not trigger this handler
-        console.log('something happens here:', ev.detail.data );
-    }
-}
-
-defineCE( 'my-element', MyElement );
-```
-
-afterwards you can use ...
-html:
-```HTML
-<my-element></my-element>
-```
-... in your template.
-
-Or you can construct it programmatically using {@link getCE}:
-javascript:
-```javascript
-const MyElementClass = getCE('my-element');
-const body = document.body;
-body.append( new MyElementClass() );
-```
-
-@example Extending a built-in element (customized built-in element)
-
----
-
-javascript:
-```javascript
-class MyButton extends DC {
-    constructor(target) {
-        super(target);
-    }
-    onConnected() {
-        this.textContent = 'Click me!';
-    }
-}
-
-defineCE('my-button', MyButton, [], 'button');
-```
-
-afterwards you can use it in your template with the `is` attribute:
-```HTML
-<button is="my-button"></button>
-```
-
-
-Or you can construct it programmatically using {@link getCE}:
-javascript:
-```javascript
-const MyButtonClass = getCE('my-button');
-const body = document.body;
-body.append( new MyButtonClass() );
-```
-
-Hints:
-- Your micro component must extend DC, since it is a DOM element
-- method names that look like event handlers are DOM - or custom event handlers ( 'onClick()', 'oneSomething()' )
-- event handlers defined as methods will be assigned to the DOM automatically
 */
 export declare function defineCE<Tag extends `${string}-${string}`, T extends object, D, E extends keyof HTMLElementTagNameMap | undefined = undefined>(tagName: Tag, DefinitionClass: new (target: TargetOf<E>, data?: D) => T, observedAttributes?: string[], extend?: E): McElementConstructor<T, D, E, McPascalCase<Tag>> | undefined;
 export declare function defineCE<Tag extends `${string}-${string}`, T extends object, E extends keyof HTMLElementTagNameMap | undefined = undefined>(tagName: Tag, DefinitionClass: new (target: TargetOf<E>) => T, observedAttributes?: string[], extend?: E): McElementConstructor<T, undefined, E, McPascalCase<Tag>> | undefined;

package/dist/core/elements.d.ts.map

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