@twobirds/microcomponents 0.0.57 → 0.0.59

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "CodeGPT.apiKey": "Ollama"
+}

package/README.md

@@ -8,10 +8,14 @@ Using micro components enforces **DRY, KISS and SOLID** principles in Javascript
 
 ## Think **Building Blocks**
 
-When coding with this system, you create classes that extend either the **[MC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MC.md?ref_type=heads#mc-class-extends-mcbase)** or **[DC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MC.md?ref_type=heads#dc-class-extends-mcbase)** superclasses provided here. These classes provide the structure you need to build your wonderland.
+In general this is a **HTML / Web Standards first** system. There is almost no abstraction, especially not for templating, except state binding to the DOM.
+
+When coding with this system, you create classes that extend either the **[MC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MC.md?ref_type=heads#mc-class-extends-mcbase)** or **[DC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MC.md?ref_type=heads#dc-class-extends-mcbase)** superclasses provided here. These classes provide the structure you need to build your wonderland. You can attach instances of your custom code to any HTMLElement, and there can be as many as you want connected to a single HTML tag.
 
 In an almost literal sense they work like childrens building blocks, where a chest full of unassuming parts lets you compose whatever functionality lies in your imagination.
 
+Also you can easily define native JS custom elements, and since these are just another instance of DC, you can enhance them even at runtime, as they are displayed in the browser.
+
 This systems **modular** approach gives you full control over your software, without the need to rely on other frameworks. On the other hand, its **minimalistic** stance enables you to use the resulting functionality in any other framework, and makes the **learning curve neglectable**.
 
 ## Status
@@ -27,7 +31,7 @@ This repository exports 5 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).
-3. (wip) **Observables** add **observability** and **run time type safety** to object properties. Also they provide **1-way binding** to placeholders in your template 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.
 4. (wip) **FormValues** gives you **2-way binding** between a HTML form and an observable object. Uses (3).
 5. (wip) **Selectors** provide chainable jQuery like selectors for both the DOM and micro components.
 

package/assets/documentation/observables.md

@@ -0,0 +1,105 @@
+# Observables Documentation
+
+This module provides utilities for observing and binding data to DOM elements using placeholders. It supports reactive updates when data changes.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Functions](#functions)
+- [Types](#types)
+- [Example Usage](#example-usage)
+
+---
+
+## Overview
+
+The module defines an `observe` function that makes object properties observable.
+
+You can use this function to turn a single property or all properties of an object into observables.
+
+This functionality can be used standalone in any framework.
+
+## Functions
+
+### `observe( target: LooseObject, propertyName?: string ): LooseObject`
+
+**Description**  
+
+Registers a distinct property or all object properties as an observable, making them reactive.
+
+Those properties are dual use: 
+
+- **Direct Assign Native Values**:  
+  - Directly assign native values to the property, and the observable will be notified of the change.
+
+- **Use as an Instance of Observable**
+  - Use the property as an instance of the `Observable` class. This allows you to attach callbacks and react to changes. You can bind the property to DOM elements.
+
+## Types
+
+### `Observable`
+
+**Definition**  
+```typescript
+export type Observable = {
+  observe: (cb: Callback) => void; // attach a callback to be notified of changes
+  notify: () => void; // mostly internal use, but can be called to trigger all callbacks
+  bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void; // the target DOM element to bind the observable to. {placeholder} will be replaced with the actual data value.
+};
+```
+
+**Methods**
+
+- `observe(cb: Callback)`  
+  Registers a callback to be notified of changes.
+
+- `notify( enable?: boolean)`
+  - Enables / Disables notifications.
+  - By default, notifications are enabled.
+  - If `enable` is `false`, notifications are disabled. You need to explicitly call `notify(true)` to re-enable notifications.
+  - Triggers all registered callbacks with the current data.
+
+- `bind(target: HTMLElement | DocumentFragment | ShadowRoot)`  
+  Binds the observable to a DOM element, replacing placeholders with data values.
+
+
+## Example Usage
+
+```typescript
+import { observe } from './src/observables';
+
+const data = {
+  name: 'John',
+  age: 30,
+};
+
+observe(data);
+
+const element = document.getElementById('user-card');
+data.bind(element);
+```
+
+In HTML:
+```html
+<div id="user-card">
+  <p>Hello, {name}</p>
+  <p>Age: {age}</p>
+</div>
+```
+
+When `data.name` or `data.age` changes, the DOM updates automatically.
+
+---
+
+## Dependencies
+
+- `helpers.js` - Provides utilities like `deepEqual`, `debounce`, `flattenObject`, etc.
+- `MC.js` - Contains `DC`, `HTMLMcElement`, and `McEvent` for DOM manipulation and event handling.
+
+---
+
+## Notes
+
+- Only objects can be bound to the DOM.
+- Native values (strings, numbers, booleans) are wrapped in observable proxies.
+- Changes to observable properties trigger updates in bound DOM elements.

package/assets/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/dist/MC.d.ts

@@ -31,6 +31,6 @@ declare class DC extends McBase {
     children(search?: string): any[];
     descendants(search?: string): any[];
 }
-export { addListener, removeListener, McBase, MC, DC, McEvent };
 export declare function autoload(enable?: boolean): boolean;
+export { addListener, removeListener, McBase, MC, DC, McEvent };
 //# sourceMappingURL=MC.d.ts.map

package/dist/MC.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAevC,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA8CD,iBAAS,WAAW,CACnB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,EAClD,OAAO,GAAE,OAAe,EACxB,IAAI,GAAE,OAAe,QAarB;AAED,iBAAS,cAAc,CACtB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,QAGlD;AAmDD,iBAAS,OAAO,CACf,MAAM,EAAE,WAAW,EACnB,EAAE,EAAE,OAAO,GAAG,MAAM,EACpB,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAwBpB;AAiGD,cAAM,MAAM;;gBAGC,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAWnE,IAAI,MAAM,IAAI,GAAG,CAEhB;CACD;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,CAAC,EAAE,WAAW,CAAM;gBAEX,MAAM,CAAC,EAAE,GAAG;IAIxB,MAAM,CAAC,OAAO,iBAAW;IAEzB,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;CAmElE;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,CAAC,EAAE,WAAW,CAAM;gBAEX,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;IAI7D,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAYpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAMvC;AAED,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC;AAiDhE,wBAAgB,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAgBxD"}
+{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAevC,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA8CD,iBAAS,WAAW,CACnB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,EAClD,OAAO,GAAE,OAAe,EACxB,IAAI,GAAE,OAAe,QAarB;AAED,iBAAS,cAAc,CACtB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,QAGlD;AAmDD,iBAAS,OAAO,CACf,MAAM,EAAE,WAAW,EACnB,EAAE,EAAE,OAAO,GAAG,MAAM,EACpB,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAwBpB;AAiGD,cAAM,MAAM;;gBAGC,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAWnE,IAAI,MAAM,IAAI,GAAG,CAEhB;CACD;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,CAAC,EAAE,WAAW,CAAM;gBAEX,MAAM,CAAC,EAAE,GAAG;IAIxB,MAAM,CAAC,OAAO,iBAAW;IAEzB,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;CAmElE;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,CAAC,EAAE,WAAW,CAAM;gBAEX,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;IAI7D,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAYpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAMvC;AA6ID,wBAAgB,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAgBxD;AAED,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC"}

package/dist/MC.min.js

@@ -202,7 +202,7 @@ function add(target, key, element = {}) {
     const _mc = node._mc;
     if (key.length && !_mc[key]) {
         _mc[key] = element;
-        if (target instanceof HTMLElement) {
+        if (target instanceof HTMLElement && !target.getAttribute('_mc')) {
             target.setAttribute('_mc', '');
         }
     }
@@ -400,32 +400,69 @@ class DC extends McBase {
         return MC_getMicroComponents([...myDomElements], search);
     }
 }
-
 let observer = null;
-const unresolved = new Map();
-function loadit() {
-    document
-        .querySelectorAll(':not(:defined),[_mc]:not([_mc=""])')
+const unresolvedCEs = new Map();
+const MCs = new Map();
+function loadUndefinedMicroComponents() {
+    [...document.querySelectorAll(':not(:defined)')]
+        .filter((element) => !!element && !document.head.querySelector(`script[${element.tagName.toLowerCase()}]`))
         .forEach((el) => {
-        const load = el.tagName.includes('-')
-            ? [el.tagName.toLowerCase()]
-            : el.getAttribute('_mc').trim().split(' ');
-        load.forEach((elementName) => {
-            let fileName = elementName.toLowerCase().split('-'), lastElement = fileName[fileName.length - 1], renameLastElement = lastElement[0].toUpperCase() + lastElement.slice(1);
-            fileName[fileName.length - 1] = renameLastElement;
-            fileName = fileName.join('/') + '.js';
-            if (el.tagName.includes('-') &&
-                !unresolved.has(el.tagName.toLowerCase())) {
-                const se = document.createElement('script');
-                unresolved.set(elementName, fileName);
-                se.setAttribute('src', fileName);
-                se.setAttribute('blocking', 'render');
-                se.setAttribute('type', 'module');
-                se.onload = () => {
-                    unresolved.delete(elementName);
-                };
-                document.head.append(se);
-            }
+        const elementName = el.tagName.toLowerCase(), fileName = '/' + elementName.split('-').join('/') + '.js';
+        const se = document.createElement('script');
+        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);
+        };
+        document.head.append(se);
+    });
+    [...document.querySelectorAll('[_mc]:not([_mc=""]')]
+        .filter((element) => !!element)
+        .forEach((el) => {
+        const toBeLoaded = el.getAttribute('_mc')?.split(' ').filter(m => !!m && !document.head.querySelector(`script[${m}]`));
+        toBeLoaded?.forEach(elementName => {
+            const se = document.createElement('script'), fileName = '/' + elementName.split('-').join('/') + '.js';
+            se.setAttribute('src', fileName);
+            se.setAttribute('blocking', 'render');
+            se.async = true;
+            se.setAttribute('type', 'module');
+            se.setAttribute(elementName, '');
+            se.onload = () => {
+                setTimeout(function () {
+                    const se = document.createElement('script');
+                    const importFileName = fileName;
+                    se.async = true;
+                    se.setAttribute('type', 'module');
+                    const code = `
+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);
+`;
+                    se.innerHTML = code;
+                    document.body.append(se);
+                }, 0);
+            };
+            se.onerror = () => {
+                console.error('could not load DOM Component code from', fileName);
+            };
+            document.head.append(se);
         });
     });
 }
@@ -437,14 +474,15 @@ function autoload(enable = true) {
         return autoloadEnabled;
     }
     autoloadEnabled = enable;
-    observer = new MutationObserver(loadit);
+    observer = new MutationObserver(loadUndefinedMicroComponents);
     setTimeout(() => {
         observer.observe(document.body, { childList: true, subtree: true });
-        loadit();
+        loadUndefinedMicroComponents();
     }, 5);
     return autoloadEnabled;
 }
 
+
 /******/ 	return __webpack_exports__;
 /******/ })()
 ;

package/dist/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/dist/elements.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.elements=t():e.elements=t()}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{defineCE:()=>y,getCE:()=>w});var r=new Function("try {return this===window;}catch(e){ return false;}");let n=new Set;r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>n.add(e)));class o{#e;#t=!1;#r=!1;constructor(e,t={},r="l"){this.#e=e,this.data=t,this.bubble=r}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#r}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#r=!0}}var i=new Function("try {return this===window;}catch(e){ return false;}");let c=new Set;function s(e,t){let r=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const n=e?._mc;!t&&n?r=r.concat(Object.values(e._mc)):t&&n&&n[t]&&r.push(n[t])}})),r}function a(e,t,r=!0){let n=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&n.push(e._mc[t]):n=n.concat(Object.values(e._mc)),r))return n;e=e.parentNode}return n}function u(e){return e&&e instanceof HTMLElement}function l(e,t,r={}){let n=e;if(!n._mc){let t=b?.debug;b.debug=!1,n._mc=new b(e),b.debug=t,delete n._mc._mc}const o=n._mc;return t.length&&!o[t]&&(o[t]=r,e instanceof HTMLElement&&e.setAttribute("_mc","")),r}function d(e,t){if(!t)return;const r=e?._mc||{};r&&r[t]&&delete r[t],!Object.keys(r).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,r={},n="l"){let i=e?._mc;if(!i)return;let c=t instanceof o?new o(t.type,t.data,"l"):new o(t,r,"l"),s="string"!=typeof t?t:new o(t,r,n);[...Object.values(i)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(c)})),/[ud]/.test(s.bubble)&&f(e,s)}function f(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let r=a(e,"",!0)?.[0].target;r&&b.trigger(r,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&b.trigger(e,t)}))}),0)}i()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>c.add(e)));class g{#n;constructor(e,t=!1){var r;this.#n=new WeakRef(e||{}),(r=this).constructor!==b&&setTimeout((()=>{r.trigger("Init")}),0),function(e){if(!i()||e.constructor===b)return;const t=e.target;if(t instanceof HTMLElement){let r=e;Object.getOwnPropertyNames(r.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof r.constructor.prototype[e])).forEach((n=>{let o=/^one/.test(n),i=n.replace(/^on[e]{0,1}/,""),s=i.toLowerCase();o&&Object.defineProperty(e,"on"+i,{configurable:!0,enumerable:!1,writable:!0,value:e=>{r.constructor.prototype[n].bind(r)(e)}}),c.has("on"+s)&&function(e,t,r,n=!1,o=!1){let i={once:!1};n&&(i.capture=n),o&&(i.once=o),e.addEventListener(t,r,i)}(t,s,(e=>{r.trigger(i,e)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class m extends g{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},r="l"){let n=this;if(n.constructor===m||n.constructor===b){let i=e instanceof o?new o(e.type,e.data,"l"):new o(e,t,"l"),c="string"!=typeof e?e:new o(e,t,r);return[...Object.getOwnPropertyNames(n)].forEach((e=>{n[e]?.trigger&&"function"==typeof n[e]?.trigger&&n[e]?.trigger(i)})),void(/[ud]/.test(c.bubble)&&f(n.target,c))}if(n instanceof m||n instanceof b){const n=this,i="string"!=typeof e?e:new o(e,t,r),c="on"+i.type[0].toUpperCase()+i.type.slice(1);if(i.bubble.indexOf("l")>-1&&(i.immediateStopped||"function"!=typeof n[c]||(n[c](i),n.hasOwnProperty(c)&&delete n[c])),i.stopped||"l"===i.bubble)return n;/[ud]/.test(i.bubble)&&f(n.target,i)}}}class b extends g{_mc={};constructor(e,t=!1){super(e)}static add=l;static remove=d;static trigger=p;trigger(e,t={},r){m.prototype.trigger.call(this,e,t,r)}parent(e=""){let t=this.target;return u(t)?a(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return u(t)?a(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!u(t))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';t.setAttribute("temp_id",r);const o=s([...t.querySelectorAll(n)],e);return t.removeAttribute("temp_id"),o}descendants(e=""){let t=this?.target;return u(t)?s([...t.querySelectorAll("*[_mc]")],e):[]}}new Map;class h extends HTMLElement{constructor(){super()}connectedCallback(){b.trigger(this,"Connected")}disconnectedCallback(){b.trigger(this,"Disconnected")}adoptedCallback(){b.trigger(this,"Adopted")}attributeChangedCallback(e,t,r){b.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:r})}}function y(e,t,r=[]){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 n=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})}(n,class extends h{instance;constructor(e){super();let r=new t(this,e);b.add(this,n,r)}static get observedAttributes(){return r}}))}function w(e){return customElements.get(e)}return t})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.elements=t():e.elements=t()}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{defineCE:()=>y,getCE:()=>w});var r=new Function("try {return this===window;}catch(e){ return false;}");let n=new Set;r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>n.add(e)));class o{#e;#t=!1;#r=!1;constructor(e,t={},r="l"){this.#e=e,this.data=t,this.bubble=r}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#r}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#r=!0}}var i=new Function("try {return this===window;}catch(e){ return false;}");let c=new Set;function s(e,t){let r=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const n=e?._mc;!t&&n?r=r.concat(Object.values(e._mc)):t&&n&&n[t]&&r.push(n[t])}})),r}function a(e,t,r=!0){let n=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&n.push(e._mc[t]):n=n.concat(Object.values(e._mc)),r))return n;e=e.parentNode}return n}function u(e){return e&&e instanceof HTMLElement}function l(e,t,r={}){let n=e;if(!n._mc){let t=b?.debug;b.debug=!1,n._mc=new b(e),b.debug=t,delete n._mc._mc}const o=n._mc;return t.length&&!o[t]&&(o[t]=r,e instanceof HTMLElement&&!e.getAttribute("_mc")&&e.setAttribute("_mc","")),r}function d(e,t){if(!t)return;const r=e?._mc||{};r&&r[t]&&delete r[t],!Object.keys(r).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,r={},n="l"){let i=e?._mc;if(!i)return;let c=t instanceof o?new o(t.type,t.data,"l"):new o(t,r,"l"),s="string"!=typeof t?t:new o(t,r,n);[...Object.values(i)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(c)})),/[ud]/.test(s.bubble)&&f(e,s)}function f(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let r=a(e,"",!0)?.[0].target;r&&b.trigger(r,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&b.trigger(e,t)}))}),0)}i()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>c.add(e)));class g{#n;constructor(e,t=!1){var r;this.#n=new WeakRef(e||{}),(r=this).constructor!==b&&setTimeout((()=>{r.trigger("Init")}),0),function(e){if(!i()||e.constructor===b)return;const t=e.target;if(t instanceof HTMLElement){let r=e;Object.getOwnPropertyNames(r.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof r.constructor.prototype[e])).forEach((n=>{let o=/^one/.test(n),i=n.replace(/^on[e]{0,1}/,""),s=i.toLowerCase();o&&Object.defineProperty(e,"on"+i,{configurable:!0,enumerable:!1,writable:!0,value:e=>{r.constructor.prototype[n].bind(r)(e)}}),c.has("on"+s)&&function(e,t,r,n=!1,o=!1){let i={once:!1};n&&(i.capture=n),o&&(i.once=o),e.addEventListener(t,r,i)}(t,s,(e=>{r.trigger(i,e)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class m extends g{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},r="l"){let n=this;if(n.constructor===m||n.constructor===b){let i=e instanceof o?new o(e.type,e.data,"l"):new o(e,t,"l"),c="string"!=typeof e?e:new o(e,t,r);return[...Object.getOwnPropertyNames(n)].forEach((e=>{n[e]?.trigger&&"function"==typeof n[e]?.trigger&&n[e]?.trigger(i)})),void(/[ud]/.test(c.bubble)&&f(n.target,c))}if(n instanceof m||n instanceof b){const n=this,i="string"!=typeof e?e:new o(e,t,r),c="on"+i.type[0].toUpperCase()+i.type.slice(1);if(i.bubble.indexOf("l")>-1&&(i.immediateStopped||"function"!=typeof n[c]||(n[c](i),n.hasOwnProperty(c)&&delete n[c])),i.stopped||"l"===i.bubble)return n;/[ud]/.test(i.bubble)&&f(n.target,i)}}}class b extends g{_mc={};constructor(e,t=!1){super(e)}static add=l;static remove=d;static trigger=p;trigger(e,t={},r){m.prototype.trigger.call(this,e,t,r)}parent(e=""){let t=this.target;return u(t)?a(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return u(t)?a(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!u(t))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';t.setAttribute("temp_id",r);const o=s([...t.querySelectorAll(n)],e);return t.removeAttribute("temp_id"),o}descendants(e=""){let t=this?.target;return u(t)?s([...t.querySelectorAll("*[_mc]")],e):[]}}new Map,new Map;class h extends HTMLElement{constructor(){super()}connectedCallback(){b.trigger(this,"Connected")}disconnectedCallback(){b.trigger(this,"Disconnected")}adoptedCallback(){b.trigger(this,"Adopted")}attributeChangedCallback(e,t,r){b.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:r})}}function y(e,t,r=[]){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 n=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})}(n,class extends h{instance;constructor(e){super();let r=new t(this,e);b.add(this,n,r)}static get observedAttributes(){return r}}))}function w(e){return customElements.get(e)}return t})()));

package/dist/formValues.d.ts

@@ -1,5 +1,3 @@
 import { LooseObject } from './helpers.js';
-export declare class FormValues {
-    constructor(targetObject: LooseObject, propertyName: string, dom: HTMLElement | ShadowRoot);
-}
+export declare function formValues(targetObject: LooseObject, propertyName: string, dom: HTMLElement | ShadowRoot): void;
 //# sourceMappingURL=formValues.d.ts.map

package/dist/formValues.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../src/formValues.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAsB,MAAM,cAAc,CAAC;AA0M/D,qBAAa,UAAU;gBAErB,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,WAAW,GAAG,UAAU;CAyB9B"}
+{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../src/formValues.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAsB,MAAM,cAAc,CAAC;AA0M/D,wBAAgB,UAAU,CACzB,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,WAAW,GAAG,UAAU,QAwB7B"}

package/dist/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();
+		});
+	});
 }
+