@twobirds/microcomponents 0.0.57 → 0.0.59

package/public/test/grandparent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grandparent.js","sourceRoot":"","sources":["../../src/test/grandparent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,QAAQ,CACP,kBAAkB,EAElB,MAAM,eAAgB,SAAQ,EAAE;IAC/B,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,MAAO,EAAE,CAAC,CAAC;QACnC,CAAC;IACF,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,kBAAkB,CAAC,CAAC"}

package/public/test/greatgrandchild.js

@@ -0,0 +1,29 @@
+import { DC, defineCE, getCE } from '.././microcomponents.js';
+function random(min, max) {
+    var random = Math.floor(Math.random() * (max - min + 1) + min);
+    return random;
+}
+defineCE('test-greatgrandchild', class TestGreatgrandchild extends DC {
+    constructor(target) {
+        super(target);
+    }
+    onConnected() {
+        let that = this;
+        that.updateStyle();
+    }
+    updateStyle() {
+        var that = this;
+        function randomBorderColor() {
+            return ('rgb(' +
+                random(0, 255) +
+                ',' +
+                random(0, 255) +
+                ',' +
+                random(0, 255) +
+                ')');
+        }
+        that.target.setAttribute('style', 'border-color:' + randomBorderColor());
+    }
+});
+export const Greatgrandchild = getCE('test-greatgrandchild');
+//# sourceMappingURL=greatgrandchild.js.map

package/public/test/greatgrandchild.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"greatgrandchild.js","sourceRoot":"","sources":["../../src/test/greatgrandchild.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAE9D,SAAS,MAAM,CAAC,GAAW,EAAE,GAAW;IACvC,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;IAC/D,OAAO,MAAM,CAAC;AACf,CAAC;AAED,QAAQ,CACP,sBAAsB,EAEtB,MAAM,mBAAoB,SAAQ,EAAE;IACnC,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,SAAS,iBAAiB;YACzB,OAAO,CACN,MAAM;gBACN,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;gBACd,GAAG;gBACH,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;gBACd,GAAG;gBACH,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;gBACd,GAAG,CACH,CAAC;QACH,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,eAAe,GAAG,iBAAiB,EAAE,CAAC,CAAC;IAC1E,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,sBAAsB,CAAC,CAAC"}

package/public/test/parent.js

@@ -0,0 +1,15 @@
+import { DC, defineCE, getCE } from '.././microcomponents.js';
+import { Child } from './child.js';
+defineCE('test-parent', class Parent extends DC {
+    constructor(target) {
+        super(target);
+    }
+    onConnected() {
+        let that = this;
+        for (let x = 0; x < 5; x++) {
+            that.target.append(new Child());
+        }
+    }
+});
+export const Parent = getCE('test-parent');
+//# sourceMappingURL=parent.js.map

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

@@ -0,0 +1,141 @@
+'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

@@ -11,7 +11,7 @@
 			href="MicroComponents.svg"
 		/>
 		<link href="./my-tag.css" rel="stylesheet" />
-		<link href="./Grandparent.css" rel="stylesheet" />
+		<link href="./grandparent.css" rel="stylesheet" />
 		<script src="./microcomponents.min.js"></script>
 		<script>
 			Object.assign(window, microcomponents); // make system global, for debugging
@@ -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

@@ -63,7 +63,7 @@ defineCE('my-tag', class MyTag extends DC {
     }
 }, ['language']);
 let MyTag = getCE('my-tag'), fragment = new DocumentFragment();
-let start = new Date().getTime(), max = 100;
+let start = new Date().getTime(), max = 1000;
 for (let x = 0; x < max; x++) {
     fragment.append(new MyTag());
 }
@@ -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,50 +410,140 @@ 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 loadUndefinedMicroComponents() {
+
+	// load unresolved custom eleents
+	[ ...document.querySelectorAll(':not(:defined)') ] // undefined custom elements
+		.filter( (element) => !!element && !document.head.querySelector(`script[${element.tagName.toLowerCase()}]`) )
 		.forEach((el) => {
-			const load: string[] = el.tagName.includes('-')
-				? [el.tagName.toLowerCase()]
-				: el.getAttribute('_mc')!.trim().split(' ');
-
-			load.forEach((elementName) => {
-				let fileName: any = elementName.toLowerCase().split('-'), // intentional any
-					lastElement = fileName[fileName.length - 1],
-					renameLastElement =
-						lastElement[0].toUpperCase() + lastElement.slice(1);
-				fileName[fileName.length - 1] = renameLastElement;
-				fileName = fileName.join('/') + '.js';
-
-				// autoload web components
-				// TBD: _mc components
-				if (
-					el.tagName.includes('-') &&
-					!unresolved.has(el.tagName.toLowerCase())
-				) {
-					const se: HTMLScriptElement = document.createElement('script');
+			const elementName = el.tagName.toLowerCase(),
+				fileName: string = '/'+elementName.split('-').join('/')+'.js';	
+			//console.log('load undefined custom element',el);
 
-					unresolved.set(elementName, fileName);
+			const se: HTMLScriptElement = document.createElement('script');
 
-					se.setAttribute('src', fileName);
-					se.setAttribute('blocking', 'render');
-					se.setAttribute('type', 'module');
-					se.onload = () => {
-						// console.info('loaded', s);
-						unresolved.delete(elementName);
-						//console.log(unresolved);
-					};
+			se.setAttribute('src', fileName);
+			se.setAttribute('blocking', 'render');
+			se.setAttribute('type', 'module');
+			se.setAttribute( elementName, '');
+
+			se.onerror = () => {
+				console.error('could not load Custom Element code from', fileName);
+			}
+
+			//console.info('load Custom Element', elementName);
+			document.head.append(se);
 
-					document.head.append(se);
+			// 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
+		});
+
+	[ ...document.querySelectorAll('[_mc]:not([_mc=""]') ] // undefined DOM components
+		.filter( (element) => !!element )
+		.forEach((el) => {
+			const toBeLoaded = el.getAttribute('_mc')?.split(' ').filter( m => !!m && !document.head.querySelector(`script[${m}]`) );
+
+
+			//console.log('load undefined DOM components',toBeLoaded);
+
+			toBeLoaded?.forEach( elementName => {
+				const se: HTMLScriptElement = document.createElement('script'),
+					fileName: string = '/'+elementName.split('-').join('/')+'.js';
+
+				se.setAttribute('src', fileName);
+				se.setAttribute('blocking', 'render');
+				se.async = true;
+				se.setAttribute('type', 'module');
+				se.setAttribute( elementName, '');
+
+				se.onload = () => {
+					// console.info('loaded MC', elementName);
+
+					// create callback script tag
+					setTimeout( function(){
+						// create callback script tag
+						const se: HTMLScriptElement = document.createElement('script');
+						const importFileName = fileName;
+
+						se.async = true;
+						se.setAttribute( 'type', 'module');
+
+						const code = /*javascript*/`
+import _ from "${importFileName}";
+import {DC} from "./microcomponents.js";
+
+//console.log('use importFileName', '${importFileName}');
+// console.log('use elementName',  '${elementName}');
+
+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[${elementName}]')?.remove();
+},0);
+`;
+						
+						//console.log('before innerHTML');
+						se.innerHTML = code;
+						//console.log('after innerHTML');
+						//console.log( 'callback script tag', se, code );
+						document.body.append(se);
+					}, 0);
+					
 				}
+
+				se.onerror = () => {
+					console.error('could not load DOM Component code from', fileName);
+				}
+
+				// console.info('load DOM Micro Component', elementName);
+				document.head.append(se);
 			});
-			//console.log(unresolved);
 		});
 }
 
@@ -467,12 +557,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/formValues.ts

@@ -202,33 +202,32 @@ const getInputHandlers = (e: HTMLElement | ShadowRoot): LooseObject => {
 	return handlers;
 };
 
-export class FormValues {
-	constructor(
-		targetObject: LooseObject,
-		propertyName: string,
-		dom: HTMLElement | ShadowRoot
-	) {
-		let handlers = getInputHandlers(dom);
+export function formValues(
+	targetObject: LooseObject,
+	propertyName: string,
+	dom: HTMLElement | ShadowRoot
+) {
+	let handlers = getInputHandlers(dom);
 
-		targetObject[propertyName] = Object.assign({}, handlers);
+	targetObject[propertyName] = Object.assign({}, handlers);
 
-		observe(targetObject, propertyName);
+	observe(targetObject, propertyName);
 
-		copyGettersSetters(handlers, targetObject[propertyName]);
+	copyGettersSetters(handlers, targetObject[propertyName]);
 
-		[...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
-			addListener(input as inputTypes, 'keyup', (ev: Event) => {
-				//console.log('keyup', ev);
-				targetObject[propertyName].notify();
-			});
-			addListener(input as HTMLElement, 'change', (ev: Event) => {
-				//console.log('change', ev);
-				targetObject[propertyName].notify();
-			});
-			addListener(input as inputTypes, 'select', (ev: Event) => {
-				//console.log('select', ev);
-				targetObject[propertyName].notify();
-			});
+	[...dom.querySelectorAll('input, textarea, select')].forEach((input) => {
+		addListener(input as inputTypes, 'keyup', (ev: Event) => {
+			//console.log('keyup', ev);
+			targetObject[propertyName].notify();
 		});
-	}
+		addListener(input as HTMLElement, 'change', (ev: Event) => {
+			//console.log('change', ev);
+			targetObject[propertyName].notify();
+		});
+		addListener(input as inputTypes, 'select', (ev: Event) => {
+			//console.log('select', ev);
+			targetObject[propertyName].notify();
+		});
+	});
 }
+

package/src/observables.ts

@@ -48,14 +48,13 @@ function getPlaceholders(target: HTMLElement): string[] {
 				});
 		});
 
-	// extract {}
-	let result: string[] = [...placeholders].map((placeholder) =>
-		placeholder.replace(/[\{\}]/g, '')
-	);
-
+	
 	//console.log('getPlaceholders()', target, result);
 
-	return [...placeholders];
+	// extract {} and return result
+	return [...placeholders].map((placeholder) =>
+		placeholder.replace(/[\{\}]/g, '')
+	);
 }
 
 const inputs = [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement];

package/src/test/{Child.ts → child.ts}

@@ -1,5 +1,5 @@
 import { DC, defineCE, getCE } from '.././microcomponents.js';
-import { TestGrandchild } from './Grandchild.js';
+import { Grandchild } from './grandchild.js';
 defineCE(
 	'test-child',
 
@@ -12,10 +12,10 @@ defineCE(
 			let that = this;
 
 			for (let x = 0; x < 10; x++) {
-				that.target.append(new TestGrandchild!());
+				that.target.append(new Grandchild!());
 			}
 		}
 	}
 );
 
-export const TestChild = getCE('test-child');
+export const Child = getCE('test-child');

package/src/test/{Grandchild.ts → grandchild.ts}

@@ -1,5 +1,5 @@
 import { DC, defineCE, getCE } from '.././microcomponents.js';
-import { TestGreatgrandchild } from './Greatgrandchild.js';
+import { Greatgrandchild } from './greatgrandchild.js';
 defineCE(
 	'test-grandchild',
 
@@ -12,10 +12,10 @@ defineCE(
 			let that = this;
 
 			for (let x = 0; x < 2; x++) {
-				that.target.append(new TestGreatgrandchild!());
+				that.target.append(new Greatgrandchild!());
 			}
 		}
 	}
 );
 
-export const TestGrandchild = getCE('test-grandchild');
+export const Grandchild = getCE('test-grandchild');

package/src/test/{Grandparent.ts → grandparent.ts}

@@ -1,5 +1,5 @@
 import { DC, defineCE, getCE } from '.././microcomponents.js';
-import { TestParent } from './Parent.js';
+import { Parent } from './parent.js';
 defineCE(
 	'test-grandparent',
 
@@ -12,10 +12,10 @@ defineCE(
 			let that = this;
 
 			for (let x = 0; x < 5; x++) {
-				that.target.append(new TestParent!());
+				that.target.append(new Parent!());
 			}
 		}
 	}
 );
 
-export const TestGrandparent = getCE('test-grandparent');
+export const GrandParent = getCE('test-grandparent');

package/src/test/{Greatgrandchild.ts → greatgrandchild.ts}

@@ -39,4 +39,4 @@ defineCE(
 	}
 );
 
-export const TestGreatgrandchild = getCE('test-greatgrandchild');
+export const Greatgrandchild = getCE('test-greatgrandchild');

package/src/test/{Parent.ts → parent.ts}

@@ -1,9 +1,9 @@
 import { DC, defineCE, getCE } from '.././microcomponents.js';
-import { TestChild } from './Child.js';
+import { Child } from './child.js';
 defineCE(
 	'test-parent',
 
-	class TestParent extends DC {
+	class Parent extends DC {
 		constructor(target: HTMLElement) {
 			super(target);
 		}
@@ -12,10 +12,10 @@ defineCE(
 			let that = this;
 
 			for (let x = 0; x < 5; x++) {
-				that.target.append(new TestChild!());
+				that.target.append(new Child!());
 			}
 		}
 	}
 );
 
-export const TestParent = getCE('test-parent');
+export const Parent = getCE('test-parent');