@twobirds/microcomponents 0.0.58 → 0.0.60

package/public/test/parent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parent.js","sourceRoot":"","sources":["../../src/test/parent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,QAAQ,CACP,aAAa,EAEb,MAAM,MAAO,SAAQ,EAAE;IACtB,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,KAAM,EAAE,CAAC,CAAC;QAClC,CAAC;IACF,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC"}

package/public/test/testform.js

@@ -1 +1,141 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.TestTestform=t():e.TestTestform=t()}(self,(()=>(()=>{"use strict";var e=new Function("try {return this===window;}catch(e){ return false;}");let t=new Set;e()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>t.add(e)));class n{#e;#t=!1;#n=!1;constructor(e,t={},n="l"){this.#e=e,this.data=t,this.bubble=n}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#n}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#n=!0}}var a=new Function("try {return this===window;}catch(e){ return false;}");let l=new Set;function r(e,t){let n=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const a=e?._mc;!t&&a?n=n.concat(Object.values(e._mc)):t&&a&&a[t]&&n.push(a[t])}})),n}function o(e,t,n=!0){let a=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&a.push(e._mc[t]):a=a.concat(Object.values(e._mc)),n))return a;e=e.parentNode}return a}function i(e){return e&&e instanceof HTMLElement}function s(e,t,n,a=!1,l=!1){let r={once:!1};a&&(r.capture=a),l&&(r.once=l),e.addEventListener(t,n,r)}function c(e,t,n={}){let a=e;if(!a._mc){let t=m?.debug;m.debug=!1,a._mc=new m(e),m.debug=t,delete a._mc._mc}const l=a._mc;return t.length&&!l[t]&&(l[t]=n,e instanceof HTMLElement&&e.setAttribute("_mc","")),n}function u(e,t){if(!t)return;const n=e?._mc||{};n&&n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,a={},l="l"){let r=e?._mc;if(!r)return;let o=t instanceof n?new n(t.type,t.data,"l"):new n(t,a,"l"),i="string"!=typeof t?t:new n(t,a,l);[...Object.values(r)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(o)})),/[ud]/.test(i.bubble)&&d(e,i)}function d(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let n=o(e,"",!0)?.[0].target;n&&m.trigger(n,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&m.trigger(e,t)}))}),0)}a()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>l.add(e)));class b{#a;constructor(e,t=!1){var n;this.#a=new WeakRef(e||{}),(n=this).constructor!==m&&setTimeout((()=>{n.trigger("Init")}),0),function(e){if(!a()||e.constructor===m)return;const t=e.target;if(t instanceof HTMLElement){let n=e;Object.getOwnPropertyNames(n.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof n.constructor.prototype[e])).forEach((a=>{let r=/^one/.test(a),o=a.replace(/^on[e]{0,1}/,""),i=o.toLowerCase();r&&Object.defineProperty(e,"on"+o,{configurable:!0,enumerable:!1,writable:!0,value:e=>{n.constructor.prototype[a].bind(n)(e)}}),l.has("on"+i)&&s(t,i,(e=>{n.trigger(o,e)}),!1,r)}))}}(this)}get target(){return this.#a.deref()}}class f extends b{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},a="l"){let l=this;if(l.constructor===f||l.constructor===m){let r=e instanceof n?new n(e.type,e.data,"l"):new n(e,t,"l"),o="string"!=typeof e?e:new n(e,t,a);return[...Object.getOwnPropertyNames(l)].forEach((e=>{l[e]?.trigger&&"function"==typeof l[e]?.trigger&&l[e]?.trigger(r)})),void(/[ud]/.test(o.bubble)&&d(l.target,o))}if(l instanceof f||l instanceof m){const l=this,r="string"!=typeof e?e:new n(e,t,a),o="on"+r.type[0].toUpperCase()+r.type.slice(1);if(r.bubble.indexOf("l")>-1&&(r.immediateStopped||"function"!=typeof l[o]||(l[o](r),l.hasOwnProperty(o)&&delete l[o])),r.stopped||"l"===r.bubble)return l;/[ud]/.test(r.bubble)&&d(l.target,r)}}}class m extends b{_mc={};constructor(e,t=!1){super(e)}static add=c;static remove=u;static trigger=p;trigger(e,t={},n){f.prototype.trigger.call(this,e,t,n)}parent(e=""){let t=this.target;return i(t)?o(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return i(t)?o(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!i(t))return[];const n=Math.random().toString().replace(".",""),a='[_mc]:not([temp_id="'+n+'"] [_mc] [_mc])';t.setAttribute("temp_id",n);const l=r([...t.querySelectorAll(a)],e);return t.removeAttribute("temp_id"),l}descendants(e=""){let t=this?.target;return i(t)?r([...t.querySelectorAll("*[_mc]")],e):[]}}function g(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var a;(a=e[n])&&a.constructor&&a.constructor===Object?t[n]=g(e[n]):t[n]=e[n]})),t}function h(e,t=!0){let n={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const a=h(e[t],!1);for(const e in a)n[t+"."+e]=a[e]}else n[t]=e[t]})),t?g(n):n}function y(e,t){return JSON.stringify(h(e))===JSON.stringify(h(t))}function v(e,t){let n;return()=>{clearTimeout(n),n=setTimeout((function(){e(...arguments)}),t)}}function O(e,t){const n=Object.getOwnPropertyDescriptors(e);for(const[e,a]of Object.entries(n))("get"in a||"set"in a)&&Object.defineProperty(t,e,a)}new Map;class w extends HTMLElement{constructor(){super()}connectedCallback(){m.trigger(this,"Connected")}disconnectedCallback(){m.trigger(this,"Disconnected")}adoptedCallback(){m.trigger(this,"Adopted")}attributeChangedCallback(e,t,n){m.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:n})}}function x(e){return null!=e&&"object"==typeof e}function E(e){let t=new Set,n=/\{[^\{\}]*\}/g;return e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(n))).forEach((a=>{new Set(e.getAttribute(a)?.match(n)).forEach((e=>t.add(e.replace(/[\{\}]/g,""))))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(n))).forEach((e=>{(e.nodeValue||"").match(n).forEach((e=>{t.add(e.replace(/[\{\}]/g,""))}))})),[...t].map((e=>e.replace(/[\{\}]/g,"")))}const k=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class A extends m{data={};oldDisplay="";constructor(e){super(e);let t=this;E(e).forEach((e=>t.data[e]="")),j(t),t.#l(),delete t._mc}#l(){let e=this,t=e.target,n=!1;t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((n=>{let a=new Set(t.getAttribute(n)?.match(/\{[^\{\}]*\}/g));var l;e.data.observe((l=t.getAttribute(n),e=>{let r=l;a.forEach((t=>{r=r.replace(t,e[t.replace(/[\{\}]/g,"")])})),t.setAttribute(n,r)}))})),[...t.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((a=>{n=!0;let l=new Set(a.nodeValue.match(/\{[^\{\}]*\}/g));var r;e.data.observe((r=a.nodeValue,n=>{let o=r;l.forEach((e=>{o=o.replace(e,n[e.replace(/[\{\}]/g,"")])})),Object.keys(n).some((e=>!!n[e]))&&(e.oldDisplay?t.style=e.oldDisplay:t.removeAttribute("style"),delete e.oldDisplay),a.nodeValue=o})),e.oldDisplay=t.getAttribute("style)")||"",n&&!k.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(e){let t=this,n={};Object.keys(e.data).forEach((a=>{t.data.hasOwnProperty(a)&&(n[a]=e.data[a])})),JSON.stringify(n)!==JSON.stringify(t.data)&&Object.assign(t.data,n)}}const j=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if("_"===t[0]||void 0===e?.[t])return e;let n,a=e[t];if(!a.prototype)switch(typeof a){case"string":n=String;break;case"number":n=Number;break;case"boolean":n=Boolean;break;case"object":n=a instanceof Array?Array:Object;break;default:return}let l=class extends n{#r=!0;constructor(e){super(e),this.constructor.callbacks=[],x(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}observe(e){return this.constructor.callbacks.push(e),this}bind(e){const t=this;if(x(t.valueOf())){!function(e){var t;(t=e,(t instanceof HTMLElement?[t]:[]).concat([...t.querySelectorAll("*")]).filter((e=>!!E(e).length)).filter((e=>"STYLE"!==e.tagName))).forEach((e=>{e?._mc?._placeholders||m.add(e,"_placeholders",new A(e))}))}(e);const n=[...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),a=function(e){let t=h(e);n.forEach((e=>{e&&e._mc.trigger("data",t)}))};t.constructor.callbacks.push(a),t.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof t.valueOf(),t);return this}notify(e){let t=this,n=x(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return void 0!==e&&(t.#r=e),t.constructor.callbacks.forEach((e=>{e(n)})),t}},r=new l(a);Object.defineProperty(e,t,{enumerable:!0,get(){if(x(r.valueOf())){let e=structuredClone(Object.assign({},r));setTimeout(v((function(){y(structuredClone(Object.assign({},r)),e)||r.notify()}),0),0)}return r},set(e){if(typeof e==typeof r.valueOf())if(x(r.valueOf())&&r.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},r));r instanceof l==0&&(r=new l(structuredClone(Object.assign({},e))),O(e,r),r.seal()),Object.assign(r,e),setTimeout(v((function(){y(structuredClone(Object.assign({},r)),t)||r.notify()}),0),0)}else{let t=r.valueOf(),n=r.constructor.callbacks;r=new l(e),r.constructor.callbacks=n,e!==t&&r.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof r.valueOf(),r,"- CANNOT BECOME:",typeof e)}}),e[t]=a})),e);class S{constructor(e){}}class _ extends S{#o;constructor(e){super(e),this.#o=e}get val(){return new FormData(this.#o.form).get(this.#o.name)}set val(e){[...this.#o.form.querySelectorAll(`input[type="radio"][name="${this.#o.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class T extends S{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.checked}set val(e){this.#o.checked=e}}class N extends S{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value}set val(e){this.#o.value=e}}class C extends S{#o;#i=!1;constructor(e){super(e),this.#o=e,this.#i=e.multiple}get val(){const e=[];return[...this.#o.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{e.push(t.value)})),this.#i?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#o.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1}))}}class I extends S{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value||""}set val(e){this.#o.value=e}}return function(e,t,n=[]){if(customElements.get(e))return void console.warn(`IGNORED: Custom element "${e}" is already defined!`);if(!e.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let a=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(a,class extends w{instance;constructor(e){super();let n=new t(this,e);m.add(this,a,n)}static get observedAttributes(){return n}}))}("test-testform",class extends m{data;constructor(e){super(e);const t=this;delete t._mc;let n=t.target.attachShadow({mode:"open"});n.innerHTML=`<style>${t.css}</style>${t.template}`,function(e,t,n){let a=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],n={};return t.forEach((e=>{const t=e.getAttribute("name");if(t){let a=!1;switch((e=>e.tagName.toLowerCase())(e)){case"input":switch(e.type){case"radio":a=new _(e);break;case"checkbox":a=new T(e);break;default:a=new N(e)}break;case"select":a=new C(e);break;case"textarea":a=new I(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}a&&(m.add(e,t,a),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>a.val,set:e=>{a.val!==e&&(a.val=e)}}))}})),n})(n);e[t]=Object.assign({},a),j(e,t),O(a,e[t]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{s(n,"keyup",(n=>{e[t].notify()})),s(n,"change",(n=>{e[t].notify()})),s(n,"select",(n=>{e[t].notify()}))}))}(t,"data",n),t.data.bind(n)}get template(){return'\n                <form>\n                    \x3c!-- sample form to start with --\x3e\n                    <fieldset>\n                        <legend>Inputs</legend>\n                        <label>text</label><input type="text" name="textInput" value="Hallo" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}\n                        <label>color</label><input type="color" name="colorInput" value="" />\n                        <label>date</label><input type="date" name="dateInput" value="" />\n                        <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />\n                        <label>email</label><input type="email" name="email" value="" />\n                        <label>file</label><input type="file" name="fileInput" value="" />\n                        <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />\n                        <label>month</label><input type="month" name="month" value="" />\n                        <label>number</label><input type="number" name="number" value="" />\n                        <label>password</label><input type="password" name="passInput" value="" />\n                        <label>range</label><input type="range" name="rangeInput" value="" />\n                        <label>search</label><input type="search" name="searchInput" value="" />\n                        <label>tel</label><input type="tel" name="telInput" value="" />\n                        <label>time</label><input type="time" name="timeInput" value="" />\n                        <label>url</label><input type="url" name="urlInput" value="" />\n                        <label>week</label><input type="week" name="weekInput" value="" />\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Selects</legend>\n\n                            <label>singleSelect</label>\n                            <select name="singleSelect">\n                                <option disabled selected value> -- select -- </option>\n                                <option value="1">Option 1</option>\n                                <option value="2">Option 2</option>\n                                <option value="3">Option 3</option>\n                                <option value="4">Option 4</option>\n                            </select>\n\n                            <label>multiSelect</label>\n                            <select name="multiSelect" multiple="multiple" type="select-multiple">\n                                <option value="1">Option 1</option>\n                                <option value="2" selected=true>Option 2</option>\n                                <option value="3">Option 3</option>\n                                <option value="4" selected=true>Option 4</option>\n                            </select>\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong><span>{myRadio}</span></legend>\n\n                        <label>radio1</label><input type="radio" name="myRadio" value="radio1">\n                        <label>radio2</label><input type="radio" name="myRadio" value="radio2">\n                        <label>radio3</label><input type="radio" name="myRadio" value="radio3">\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>Checkboxes</legend>\n                        <label>cb1</label><input type="checkbox" name="cb1">\n                        <label>cb2</label><input type="checkbox" name="cb2">\n                        <label>cb3</label><input type="checkbox" name="cb3">\n                        <label>cb4</label><input type="checkbox" name="cb4">\n                        <label>cb5</label><input type="checkbox" name="cb5">\n\n                    </fieldset>\n\n                    <fieldset>\n                        <legend>TextArea</legend>\n                        <label>textArea</label>\n                        <textarea name="textArea">abc</textarea>\n                    </fieldset>\n\n                </form>\n            '}get css(){return"\nlegend {\n    display: inherit;\n    margin:  inherit;\n    vertical-align:  inherit;\n}\n\nlabel {\n    display: inline;\n    margin-top: 5px;\n    margin-left: 5px;\n    vertical-align: top;\n    width: 10em;\n    text-align: right;\n}\n\nlabel::before {\n    content: ' ';\n    display: block;\n}\n\nform input,\nform select,\nform textarea {\n    margin-left: 5px;\n    margin-top: 0px;\n    display: inline;\n}\n\nform label + textarea {\n    display: inline-block;\n    margin-top: 3px;\n}\n\nform input + label {\n    width: inherit;\n    margin-top: 3px;\n    text-align: left;\n}\n\nbody > form {\n    display: block;\n}\n\nform fieldset {\n    border: 1px solid darkslategrey;\n    border-radius: 3px;\n    margin: 0.5em 0;\n}\n            "}}),{}})()));
+'use strict';
+import { DC, defineCE, formValues } from '.././microcomponents.js';
+defineCE('test-testform', class TestTestForm extends DC {
+    data;
+    constructor(target) {
+        super(target);
+        const that = this;
+        delete that._mc;
+        let shadow = that.target.attachShadow({ mode: 'open' });
+        shadow.innerHTML = `<style>${that.css}</style>${that.template}`;
+        formValues(that, 'data', shadow);
+        that.data.bind(shadow);
+    }
+    get template() {
+        return `
+                <form>
+                    <!-- sample form to start with -->
+                    <fieldset>
+                        <legend>Inputs</legend>
+                        <label>text</label><input type="text" name="textInput" value="Hallo" />&nbsp;<strong>2wB:&nbsp;</strong>{textInput}
+                        <label>color</label><input type="color" name="colorInput" value="" />
+                        <label>date</label><input type="date" name="dateInput" value="" />
+                        <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />
+                        <label>email</label><input type="email" name="email" value="" />
+                        <label>file</label><input type="file" name="fileInput" value="" />
+                        <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />
+                        <label>month</label><input type="month" name="month" value="" />
+                        <label>number</label><input type="number" name="number" value="" />
+                        <label>password</label><input type="password" name="passInput" value="" />
+                        <label>range</label><input type="range" name="rangeInput" value="" />
+                        <label>search</label><input type="search" name="searchInput" value="" />
+                        <label>tel</label><input type="tel" name="telInput" value="" />
+                        <label>time</label><input type="time" name="timeInput" value="" />
+                        <label>url</label><input type="url" name="urlInput" value="" />
+                        <label>week</label><input type="week" name="weekInput" value="" />
+                    </fieldset>
+
+                    <fieldset>
+                        <legend>Selects</legend>
+
+                            <label>singleSelect</label>
+                            <select name="singleSelect">
+                                <option disabled selected value> -- select -- </option>
+                                <option value="1">Option 1</option>
+                                <option value="2">Option 2</option>
+                                <option value="3">Option 3</option>
+                                <option value="4">Option 4</option>
+                            </select>
+
+                            <label>multiSelect</label>
+                            <select name="multiSelect" multiple="multiple" type="select-multiple">
+                                <option value="1">Option 1</option>
+                                <option value="2" selected=true>Option 2</option>
+                                <option value="3">Option 3</option>
+                                <option value="4" selected=true>Option 4</option>
+                            </select>
+
+                    </fieldset>
+
+                    <fieldset>
+                        <legend>Radiobuttons&nbsp;<strong>2wB:&nbsp;</strong><span>{myRadio}</span></legend>
+
+                        <label>radio1</label><input type="radio" name="myRadio" value="radio1">
+                        <label>radio2</label><input type="radio" name="myRadio" value="radio2">
+                        <label>radio3</label><input type="radio" name="myRadio" value="radio3">
+
+                    </fieldset>
+
+                    <fieldset>
+                        <legend>Checkboxes</legend>
+                        <label>cb1</label><input type="checkbox" name="cb1">
+                        <label>cb2</label><input type="checkbox" name="cb2">
+                        <label>cb3</label><input type="checkbox" name="cb3">
+                        <label>cb4</label><input type="checkbox" name="cb4">
+                        <label>cb5</label><input type="checkbox" name="cb5">
+
+                    </fieldset>
+
+                    <fieldset>
+                        <legend>TextArea</legend>
+                        <label>textArea</label>
+                        <textarea name="textArea">abc</textarea>
+                    </fieldset>
+
+                </form>
+            `;
+    }
+    get css() {
+        return `
+legend {
+    display: inherit;
+    margin:  inherit;
+    vertical-align:  inherit;
+}
+
+label {
+    display: inline;
+    margin-top: 5px;
+    margin-left: 5px;
+    vertical-align: top;
+    width: 10em;
+    text-align: right;
+}
+
+label::before {
+    content: ' ';
+    display: block;
+}
+
+form input,
+form select,
+form textarea {
+    margin-left: 5px;
+    margin-top: 0px;
+    display: inline;
+}
+
+form label + textarea {
+    display: inline-block;
+    margin-top: 3px;
+}
+
+form input + label {
+    width: inherit;
+    margin-top: 3px;
+    text-align: left;
+}
+
+body > form {
+    display: block;
+}
+
+form fieldset {
+    border: 1px solid darkslategrey;
+    border-radius: 3px;
+    margin: 0.5em 0;
+}
+            `;
+    }
+});
+//# sourceMappingURL=testform.js.map

package/public/test/testform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testform.js","sourceRoot":"","sources":["../../src/test/testform.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAc,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE/E,QAAQ,CACP,eAAe,EAEf,MAAM,YAAa,SAAQ,EAAE;IAC5B,IAAI,CAAU;IAEd,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,MAAM,IAAI,GAAG,IAAI,CAAC;QAElB,OAAO,IAAI,CAAC,GAAG,CAAC;QAEhB,IAAI,MAAM,GAAI,IAAW,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QAChE,MAAM,CAAC,SAAS,GAAG,UAAU,IAAI,CAAC,GAAG,WAAW,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhE,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QAEhC,IAAI,CAAC,IAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC;IAED,IAAI,QAAQ;QACX,OAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAuEN,CAAC;IACZ,CAAC;IAED,IAAI,GAAG;QACN,OAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAiDL,CAAC;IACZ,CAAC;CACD,CACD,CAAC"}

package/public/test/testmc.js

@@ -0,0 +1,10 @@
+import { DC } from '../microcomponents.js';
+export default class testmc extends DC {
+    constructor(target) {
+        super(target);
+    }
+    oneInit() {
+        console.log('testmc connected to DOM');
+    }
+}
+//# sourceMappingURL=testmc.js.map

package/public/test/testmc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testmc.js","sourceRoot":"","sources":["../../src/test/testmc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAC;AAE3C,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,EAAE;IAClC,YAAY,MAAmB;QAC3B,KAAK,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,OAAO;QACH,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;IAC3C,CAAC;CACJ"}

package/public/test.html

@@ -21,7 +21,7 @@
 	</head>
 	<body>
 		<test-grandparent></test-grandparent>
-		<test-testform></test-testform>
+		<test-testform _mc="test-testmc"></test-testform>
 		Open the debugger, read console, then:<br />
 	</body>
 </html>

package/public/test.js

@@ -72,7 +72,10 @@ document.body.appendChild(fragment);
 setTimeout(() => {
     console.log('%c \n\nStress Test:\n\n %cInstancing %s web components (%s classes): %c %s ms.', 'font-weight: bold; color: black;', 'font-weight: normal;', max, max * 3, 'font-weight: bold; color: blue;', end - start);
     let element = document.querySelector('my-tag');
-    console.log("\n\n%cInspect this tag:%c \n( ...to see the inner structure in the '._mc' property )\n\n %O %c %s", 'font-weight: bold;', 'font-weight: normal;', element, 'font-weight: bold;', '\n\nLook up code in the debugger: test.js\n\n');
+    console.log("\n\n%cInspect this tag:%c \n( ...to see the inner structure in the '._mc' property )\n\n %O %c %s", 'font-weight: bold;', 'font-weight: normal;', element, 'font-weight: bold;', '\n\nLook up code in the debugger: test.js\n');
+    let form = document.querySelector('test-testform');
+    let formData = form._mc.TestTestform.data;
+    console.log("\n\n%cRight-click this object and store it as a global variable:%c \n\n %O %c %s %c %s %c %s", 'font-weight: bold;', 'font-weight: normal;', formData, 'font-weight: bold;', '\n\nYou can then use e.g. \n\n', 'font-weight: normal;', '  temp0.textInput = "whatever"', 'font-weight: bold;', '\n\nto change the form contents.\n');
     DC.trigger(element, 'doSomething');
 }, 500);
 //# sourceMappingURL=test.js.map

package/public/test.js.map

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

package/src/MC.ts

@@ -111,7 +111,7 @@ function add(target: HTMLElement, key: string, element = {}): any {
 	if (key.length && !_mc[key]) {
 		_mc[key] = element;
 		// add attribute if HTMLElement
-		if (target instanceof HTMLElement) {
+		if (target instanceof HTMLElement && ! target.getAttribute('_mc') ) {
 			target.setAttribute('_mc', '');
 		}
 	}
@@ -410,46 +410,145 @@ class DC extends McBase {
 	}
 }
 
-export { addListener, removeListener, McBase, MC, DC, McEvent };
-
 let observer: MutationObserver | null = null;
-const unresolved = new Map();
 
-function loadit() {
-	document
-		.querySelectorAll(':not(:defined),[_mc]:not([_mc=""])')
+/*
+unresolvedCEs (code below this comment):
+
+a repository (a hashmap) of undefined custom elements: 
+the name is the tagname of the micro component (like "my-custom-component")
+if they are loading, the value is a script element
+if they are loaded, the entry is deleted and the browser instanciates it automatically
+if they cannot be loaded, the browser will throw an error
+
+If the custom element ( defined by its tagname, like "my-custom-component") is not defined, it will be on-demand loaded:
+The file name is assumed to be "/my/custom/component.js"
+The file must define a custom element via the defineCE() function included in the "elements" module. 
+This function is a wrapper for customElementRegistry.define(), which you can also use directly in the imported code.
+
+In general this behaves like a custom runtime import for custom elements in the browser.
+The only difference is that the micro component is loaded only when needed, and not on page load.
+*/	
+
+const unresolvedCEs = new Map();
+
+/*
+MCs (code below this comment): 
+a repository (a hashmap) of micro components: 
+the name is the name of the micro component (like "my-mc")
+if they are loading, the value is a script element
+if they are loaded, the value is the micro component class itself
+
+This is mostly used for old style progressive enhancement:
+If the micro component ( defined in the HTMLElements "_mc" attribute, like "my-mc") is not defined, it will be on-demand loaded:
+The file name is assumed to be "/my/mc.js"
+The file needs to have a default export, and it should be a class that extends the DC class ( since it is in a HTMLElements attribute )
+
+In general this behaves like a custom runtime import for classes in the browser.
+The only difference is that the micro component is loaded only when needed, and not on page load.
+*/	
+const MCs = new Map(); 
+
+function makeLoadScript( element: string ): HTMLScriptElement {
+
+	const fileName: string = '/' + element.split('-').join('/')+'.js';	
+
+	const se: HTMLScriptElement = document.createElement('script');
+
+	se.setAttribute('src', fileName);
+	se.setAttribute('blocking', 'render');
+	se.async = true;
+	se.setAttribute('type', 'module');
+	se.setAttribute( 'name', element);
+	se.setAttribute( 'loading', '');
+
+	addListener( se, 'load', (ev) => {
+		// console.info('loaded MC', elementName);
+		se.removeAttribute( 'loading' );
+		se.setAttribute( 'loaded', '');
+	});
+
+	addListener( se, 'error', (ev) => {
+		console.error('could not load Custom Element code from', fileName);
+	});
+
+	return se;
+}
+
+function onLoadCallback( script: HTMLScriptElement ) {
+	// create callback script tag
+	setTimeout( function(){
+		// create callback script tag
+		const importFileName = script.getAttribute('src');
+		const elementName = script.getAttribute('name');
+		
+		const se: HTMLScriptElement = document.createElement('script');
+
+		se.async = true;
+		se.setAttribute( 'type', 'module');
+
+		const code = /*javascript*/`
+import _ from "${importFileName}";
+import {DC} from "./microcomponents.js";
+
+const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
+
+// console.log('elements',  elements);
+elements.forEach((element) => {
+	// console.log('DC, element,class', DC, element, _);
+	DC.add(element, _.name, new _(element));
+	element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim());
+});
+setTimeout( () => {
+	// console.log('remove callback script tag', '${elementName}'); 
+	document.body.querySelector('script[name="${elementName}]"')?.remove();
+},0);`;
+
+		se.innerHTML = code;
+		document.body.append(se);
+	}, 0);
+}
+
+
+function loadUndefinedMicroComponents() {
+
+	// load unresolved custom eleents
+	[ ...document.querySelectorAll(':not(:defined)') ] // undefined custom elements
+		.filter( (element) => !!element && !document.head.querySelector(`script[name="${element.tagName.toLowerCase()}"]`) )
 		.forEach((el) => {
-			const load: string[] = el.tagName.includes('-')
-				? [el.tagName.toLowerCase()]
-				: el.getAttribute('_mc')!.trim().split(' ');
+			const elementName = el.tagName.toLowerCase(),
+				fileName: string = '/'+elementName.split('-').join('/')+'.js';	
 
-			load.forEach((elementName) => {
-				let fileName: any = elementName.toLowerCase().split('-');
-				fileName = fileName.join('/') + '.js';
+			const se: HTMLScriptElement = makeLoadScript( elementName );
 
-				// autoload web components
-				// TBD: _mc components
-				if (
-					el.tagName.includes('-') &&
-					!unresolved.has(el.tagName.toLowerCase())
-				) {
-					const se: HTMLScriptElement = document.createElement('script');
+			document.head.append(se);
 
-					unresolved.set(elementName, fileName);
+			// instanciation of the micro component will be handled by the browser automatically
+			// module code must define the micro component class and add it to the customElementRegistry
+		});
 
-					se.setAttribute('src', fileName);
-					se.setAttribute('blocking', 'render');
-					se.setAttribute('type', 'module');
-					se.onload = () => {
-						// console.info('loaded', s);
-						unresolved.delete(elementName);
-						//console.log(unresolved);
-					};
+	[ ...document.querySelectorAll('[_mc]:not([_mc=""]') ] // undefined DOM components
+		.filter( (element) => !!element )
+		.forEach((el) => {
+			const elements = el.getAttribute('_mc')?.split(' ').filter( m => !!m ) || [];
+			const elementsToBeLoaded = elements.filter( m => !document.head.querySelector(`script[name="${m}"]`) );
+			const elementsAlreadyLoaded = elements.filter( m => !!document.head.querySelector(`script[name="${m}"][loaded]`) );
 
-					document.head.append(se);
-				}
+			// load MC components that do not exist yet
+			elementsToBeLoaded?.forEach( elementName => {
+				const se: HTMLScriptElement = makeLoadScript( elementName );
+
+				addListener( se, 'load', () => onLoadCallback( document.head.querySelector(`script[name="${elementName}"]`) as HTMLScriptElement) );
+			
+				document.head.append(se);
+			});
+
+			// loading MC components already have callbacks attached
+
+			// MCs that are already loaded will trigger the onLoadCallback manually
+			elementsAlreadyLoaded?.forEach( elementName => {
+				onLoadCallback( document.head.querySelector(`script[name="${elementName}"]`) as HTMLScriptElement);			
 			});
-			//console.log(unresolved);
 		});
 }
 
@@ -463,12 +562,15 @@ export function autoload(enable: boolean = true): boolean {
 	}
 
 	autoloadEnabled = enable;
-	observer = new MutationObserver(loadit);
+	observer = new MutationObserver(loadUndefinedMicroComponents);
 
 	setTimeout(() => {
 		observer!.observe(document.body, { childList: true, subtree: true });
-		loadit();
+		loadUndefinedMicroComponents();
 	}, 5);
 
 	return autoloadEnabled;
 }
+
+export { addListener, removeListener, McBase, MC, DC, McEvent };
+

package/src/test/testmc.ts

@@ -0,0 +1,11 @@
+import { DC } from '../microcomponents.js';
+
+export default class testmc extends DC {
+    constructor(target: HTMLElement) {
+        super(target);
+    }
+
+    oneInit() {
+        console.log('testmc connected to DOM');
+    }
+}

package/src/test.ts

@@ -169,9 +169,25 @@ setTimeout(() => {
 		'font-weight: normal;',
 		element,
 		'font-weight: bold;',
-		'\n\nLook up code in the debugger: test.js\n\n'
+		'\n\nLook up code in the debugger: test.js\n'
 	);
 
+		let form = ( document.querySelector('test-testform') as any);
+		let formData = form._mc.TestTestform.data;
+
+		console.log(
+			"\n\n%cRight-click this object and store it as a global variable:%c \n\n %O %c %s %c %s %c %s",
+			'font-weight: bold;',
+			'font-weight: normal;',
+			formData,
+			'font-weight: bold;',
+			'\n\nYou can then use e.g. \n\n',
+			'font-weight: normal;',
+			'  temp0.textInput = "whatever"',
+			'font-weight: bold;',
+			'\n\nto change the form contents.\n'
+		);
+
 	// will trigger the event on all micro components contained in <my-tag>
 	DC.trigger(element, 'doSomething');
 }, 500);

package/webpack.config.js

@@ -304,4 +304,43 @@ module.exports = [
 			minimize: true, // Enable minification
 		},
 	},
+	/*
+	{
+		entry: './build/test/default.js',
+		mode: 'production',
+		output: {
+			path: path.resolve(__dirname, 'public/test'),
+			filename: 'default.js',
+			libraryTarget: 'umd',
+			library: 'default',
+		},
+		module: {
+			rules: [
+				{
+					// test: /\.tsx?$/,
+					use: [
+						{
+							loader: 'ts-loader',
+							options: {
+								transpileOnly: true, // Avoid type checking during webpack build
+								compilerOptions: {
+									declaration: false, // Generate .d.ts files
+									declarationMap: false, // Generate .d.ts.map files
+									outDir: 'build/types', // Output .d.ts and .d.ts.map to a different directory
+								},
+							},
+						},
+					],
+					exclude: /node_modules/,
+				},
+			],
+		},
+		resolve: {
+			extensions: ['.tsx', '.ts', '.js'],
+		},
+		optimization: {
+			minimize: true, // Enable minification
+		},
+	},
+	*/
 ];