@twobirds/microcomponents 0.0.82 → 0.0.83

package/public/src/test/test.ts

@@ -0,0 +1,188 @@
+import {
+	LooseObject,
+	DC,
+	McEvent,
+	defineCE,
+	getCE,
+	observe,
+	Observable,
+} from '../microcomponents.js';
+
+class Translator extends DC {
+	#translations: LooseObject = {};
+
+	Language: unknown = 'en';
+	Translation: unknown = {};
+
+	constructor(
+		target: HTMLElement | ShadowRoot | DocumentFragment,
+		translations: LooseObject,
+		translationTargetObject: HTMLElement
+	) {
+		super(target as HTMLElement);
+		let that = this; // minifier help
+
+		// state
+		that.Language = 'en';
+		that.Translation = {};
+
+		observe(that);
+
+		// setup
+		that.#translations = translations;
+
+		// on language change switch translation object
+		(that.Language as Observable).observe((lang) => {
+			if (that.#translations.hasOwnProperty(lang)) {
+				that.Translation = { lang: that.#translations[lang] }; // set translation
+			}
+		});
+
+		(that.Translation as Observable).bind(translationTargetObject);
+
+		that.target.setAttribute('language', 'en');
+
+		(that.Language as Observable).notify();
+	}
+
+	onAttributeChanged(ev: McEvent) {
+		if (!ev.data.newValue) return;
+		switch (ev.data.name) {
+			case 'language':
+				this.Language = ev.data.newValue;
+				break;
+		}
+	}
+}
+
+defineCE(
+	// equivalent to custom element registry .define()
+	'my-tag',
+	class MyTag extends DC {
+		#template: string = '<button>{lang.click} {counter}</button>';
+
+		#languages = {
+			en: {
+				click: 'click me',
+			},
+			de: {
+				click: 'klick mich',
+			},
+		};
+
+		Dom: LooseObject = {};
+
+		constructor(target: HTMLElement) {
+			super(target);
+
+			let that = this; // minifier help
+
+			// render
+			target.innerHTML = this.#template;
+
+			// add translator
+			DC.add(
+				target,
+				'translator',
+				new Translator(target, that.#languages, target)
+			);
+		}
+
+		oneInit(ev: McEvent) {
+			let that = this;
+
+			// state
+			that.Dom = { counter: 0 };
+
+			// state: convert all props defined so far into observables
+			observe(that);
+
+			// bind Dom to target
+			(that.Dom as Observable).bind(that.target);
+		}
+
+		onClick(ev: McEvent) {
+			const that = this,
+				c = that.Dom.counter++;
+			(ev.data as PointerEvent).stopPropagation();
+			(that.target as HTMLElement).classList.remove('clicked');
+			(that.target as HTMLElement).classList.add(
+				that.Dom.counter > 9 ? 'overClicked' : 'clicked'
+			);
+		}
+	},
+	['language']
+);
+
+let MyTag: CustomElementConstructor = getCE('my-tag')!,
+	fragment = new DocumentFragment();
+
+/*
+stress test
+*/
+
+let start = new Date().getTime(),
+	max = 1000;
+
+// create 1000 elements
+for (let x = 0; x < max; x++) {
+	fragment.append(new MyTag());
+}
+
+let end = new Date().getTime();
+
+// and put them into the DOM
+document.body.appendChild(fragment);
+
+//document.querySelectorAll('my-tag').forEach((e) => e.remove());
+
+/*
+console test
+*/
+
+setTimeout(() => {
+	// console.clear();
+
+	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
+	);
+
+	//document.body.appendChild(new MyTag());
+
+	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'
+	);
+
+	let form = ( document.querySelector('test-testform') as any);
+	let formInstance = form._mc.TestTestform;
+
+	(window as any).form = formInstance;
+	console.log(
+		"\n\n%cAttached a global variable 'form':%c \n\n %O %c %s %c %s %c %s",
+		'font-weight: bold;',
+		'font-weight: normal;',
+		formInstance,
+		'font-weight: bold;',
+		'\n\nYou can use it to change input values, e.g. \n\n',
+		'font-weight: normal;',
+		'  form.data.textInput="other value"',
+		'font-weight: bold;',
+		'\n\nChanges will be reflected in the form contents, same as vice versa.\n'
+	);
+
+	// will trigger the event on all micro components contained in <my-tag>
+	DC.trigger(element, 'doSomething');
+}, 1000);

package/public/src/test/testform.css

@@ -0,0 +1,47 @@
+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;
+}

package/public/src/test/testform.html

@@ -0,0 +1,56 @@
+<!-- test form -->
+<fieldset>
+    <legend>Inputs</legend>
+    <label>text</label><input type="text" name="textInput" value="" />&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>{myRadio}</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"></textarea>
+</fieldset>

package/public/src/test/testform.json

@@ -0,0 +1,27 @@
+{
+	"textInput":"Hallo Welt",
+	"colorInput":"#eaf8f8",
+	"dateInput":"",
+	"dtlInput":"",
+	"email":"",
+	"hiddenInput":"",
+	"hiddenVal":"",
+	"month":"",
+	"number":"",
+	"passInput":"",
+	"rangeInput":"30",
+	"searchInput":"",
+	"telInput":"",
+	"timeInput":"",
+	"urlInput":"",
+	"weekInput":"",
+	"myRadio":"radio3",
+	"cb1":true,
+	"cb2":false,
+	"cb3":true,
+	"cb4":false,
+	"cb5":false,
+	"singleSelect":"",
+	"multiSelect":["2","4"],
+	"textArea":"This is some example\rtext..."
+}

package/public/test/MC.d.ts

@@ -7,20 +7,20 @@ declare function addListener(domNode: Node, eventName: string, handler: EventLis
 declare function removeListener(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject | null): void;
 declare function trigger(target: HTMLElement, ev: McEvent | string, data?: any, bubble?: string): void;
 declare class McBase {
-    #private;
+    private _target;
+    private __mc;
     constructor(target?: {
         [key: string]: any;
     }, debug?: boolean);
     get target(): any;
+    get _mc(): any;
 }
 declare class MC extends McBase {
-    _mc?: LooseObject;
     constructor(target?: any);
     static trigger: typeof trigger;
     trigger(ev: McEvent | string, data?: any, bubble?: string): this | undefined;
 }
 declare class DC extends McBase {
-    _mc?: LooseObject;
     constructor(target: HTMLElement, debug?: boolean);
     static add: Function;
     static remove: Function;

package/public/test/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;AA6KD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"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;IACX,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,IAAI,CAAmB;gBAEnB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAWnE,IAAI,MAAM,IAAI,GAAG,CAEhB;IAED,IAAI,GAAG,IAAI,GAAG,CAEb;CACD;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,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;gBACV,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;AAgGD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/public/test/MC.js

@@ -166,19 +166,22 @@ function bubbleEvent(target, ev) {
     }
 }
 class McBase {
-    #target;
+    _target;
+    __mc = {};
     constructor(target, debug = false) {
         let that = this, element = that;
-        this.#target = new WeakRef(target || {});
+        this._target = new WeakRef(target || {});
         init(element);
         autoAttachListeners(element);
     }
     get target() {
-        return this.#target.deref();
+        return this._target.deref();
+    }
+    get _mc() {
+        return this.__mc;
     }
 }
 class MC extends McBase {
-    _mc = {};
     constructor(target) {
         super(target);
     }
@@ -225,7 +228,6 @@ class MC extends McBase {
     }
 }
 class DC extends McBase {
-    _mc = {};
     constructor(target, debug = false) {
         super(target);
     }
@@ -267,93 +269,60 @@ class DC extends McBase {
         return getMicroComponents([...myDomElements], search);
     }
 }
-const CEs = new Map();
-const MCs = new Map();
+const loadingMCs = new Set();
 function makeLoadScript(element) {
+    if (loadingMCs.has(element))
+        return;
+    loadingMCs.add(element);
     const fileName = './' + element.split('-').join('/') + '.js';
     const se = document.createElement('script');
     se.setAttribute('src', fileName);
     se.setAttribute('blocking', 'render');
     se.async = true;
     se.setAttribute('type', 'module');
-    se.setAttribute('name', element);
+    se.setAttribute('data-name', element);
     se.setAttribute('loading', '');
+    const loadedPromise = customElements.whenDefined(element);
+    loadedPromise.then(() => {
+        const elements = Array
+            .from(document.querySelectorAll(`[_mc*="${element}"]`))
+            .filter(element => element instanceof HTMLElement);
+        if (elements.length === 0)
+            return;
+        const klass = customElements.get(element);
+        elements.forEach((node) => {
+            DC.add(node, klass.name, new klass(node));
+            const new_mc = node
+                .getAttribute('_mc')
+                .split(' ')
+                .filter((name) => name !== element && name !== '')
+                .join(' ');
+            node.setAttribute('_mc', new_mc);
+        });
+        document.head.querySelector('script[data-name="${elementName}]"')?.remove();
+    });
     addListener(se, 'load', (ev) => {
-        se.removeAttribute('loading');
-        se.setAttribute('loaded', '');
+        loadingMCs.delete(element);
     });
     addListener(se, 'error', (ev) => {
-        console.error('could not load Custom Element code from', fileName);
+        console.error('could not load MC code from', fileName);
     });
-    return se;
+    document.head.append(se);
 }
-function onLoadCallback(script) {
-    setTimeout(function () {
-        const importFileName = script.getAttribute('src');
-        const elementName = script.getAttribute('name');
-        const se = document.createElement('script');
-        se.async = true;
-        se.setAttribute('type', 'module');
-        const code = `
-
-			import _ from "${importFileName}";
-			import { DC } from "./microcomponents.js";
-
-			const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
-
-			elements.forEach((element) => {
-				// add class to MCs repository
-				autoload.state.MCs.set( '${elementName}', _ );
-				// add instance to HTMLElement 
-				DC.add(element, _.name, new _(element));
-				// remove instance name from elements "_mc" attribute
-				element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim()); 
-			});
-
-			setTimeout( () => {
-				document.body.querySelector('script[name="${elementName}]"')?.remove();
-			},0);
-
-		`;
-        se.innerHTML = code;
-        document.body.append(se);
-    }, 0);
-}
-function loadUndefinedMicroComponents() {
+function loadUndefinedMCs() {
     [...document.querySelectorAll(':not(:defined)')]
         .filter((element) => !!element
         && !customElements.get(element.tagName.toLowerCase())
-        && !CEs.has(element.tagName.toLowerCase()))
+        && !loadingMCs.has(element.tagName.toLowerCase()))
         .forEach((el) => {
-        const elementName = el.tagName.toLowerCase(), fileName = './' + elementName.split('-').join('/') + '.js';
-        const se = makeLoadScript(elementName);
-        addListener(se, 'load', () => {
-            CEs.set(elementName, customElements.get(el.tagName.toLowerCase()));
-        });
-        CEs.set(elementName, 'loading');
-        document.head.append(se);
+        makeLoadScript(el.tagName.toLowerCase());
     });
     [...document.querySelectorAll('[_mc]:not([_mc=""]')]
         .filter((element) => !!element)
         .forEach((el) => {
-        const elements = el.getAttribute('_mc')?.split(' ').filter(m => !!m) || [];
-        const elementsToBeLoaded = elements.filter(m => !MCs.has(m));
-        elementsToBeLoaded?.forEach(elementName => {
-            const se = makeLoadScript(elementName);
-            addListener(se, 'load', () => onLoadCallback(document.head.querySelector(`script[name="${elementName}"]`)));
-            MCs.set(elementName, 'loading');
-            document.head.append(se);
-        });
-        const elementsAlreadyLoaded = elements.filter(m => MCs.has(m) && !MCs.get(m).length);
-        elementsAlreadyLoaded?.forEach(elementName => {
-            setTimeout(() => {
-                DC.add(el, elementName, new (autoload.state.MCs.get(elementName))(el));
-                const newAttribute = el.getAttribute('_mc')
-                    .replace('${elementName}', '')
-                    .replace(/\w\w/g, ' ')
-                    .trim() || '_mc';
-                el.setAttribute('_mc');
-            }, 5);
+        const _mc = el.getAttribute('_mc')?.split(' ').filter(name => name !== '');
+        _mc?.forEach(dc => {
+            makeLoadScript(dc);
         });
     });
 }
@@ -366,14 +335,14 @@ function autoload(enable = true) {
         return autoloadEnabled;
     }
     autoloadEnabled = enable;
-    observer = new MutationObserver(loadUndefinedMicroComponents);
+    observer = new MutationObserver(loadUndefinedMCs);
     setTimeout(() => {
         observer.observe(document.body, { childList: true, subtree: true });
-        loadUndefinedMicroComponents();
+        loadUndefinedMCs();
     }, 5);
     window.autoload = window.autoload || autoload;
     return autoloadEnabled;
 }
-autoload.state = { CEs, MCs };
+autoload.state = { loadingMCs };
 export { addListener, removeListener, McBase, MC, DC, McEvent, autoload };
 //# sourceMappingURL=MC.js.map