@twobirds/microcomponents 0.0.64 → 0.0.66

package/public/src/test.ts

@@ -1,193 +0,0 @@
-'use strict';
-
-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;
-
-		// state
-		(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();
-
-		delete that._mc; // cleanup, not needed
-	}
-
-	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)
-			);
-
-			delete that._mc; // cleanup, not needed
-		}
-
-		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 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/public/test/child.js

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

package/public/test/child.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"child.js","sourceRoot":"","sources":["../../src/test/child.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,QAAQ,CACP,YAAY,EAEZ,MAAM,SAAU,SAAQ,EAAE;IACzB,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,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,UAAW,EAAE,CAAC,CAAC;QACvC,CAAC;IACF,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC"}

package/public/test/grandchild.js

@@ -1,15 +0,0 @@
-import { DC, defineCE, getCE } from '.././microcomponents.js';
-import { Greatgrandchild } from './greatgrandchild.js';
-defineCE('test-grandchild', class TestGrandchild extends DC {
-    constructor(target) {
-        super(target);
-    }
-    onConnected() {
-        let that = this;
-        for (let x = 0; x < 2; x++) {
-            that.target.append(new Greatgrandchild());
-        }
-    }
-});
-export const Grandchild = getCE('test-grandchild');
-//# sourceMappingURL=grandchild.js.map

package/public/test/grandchild.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"grandchild.js","sourceRoot":"","sources":["../../src/test/grandchild.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,QAAQ,CACP,iBAAiB,EAEjB,MAAM,cAAe,SAAQ,EAAE;IAC9B,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,eAAgB,EAAE,CAAC,CAAC;QAC5C,CAAC;IACF,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC"}

package/public/test/grandparent.js

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

package/public/test/grandparent.js.map

@@ -1 +0,0 @@
-{"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

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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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

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

package/public/test/testmc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"testmc.js","sourceRoot":"","sources":["../../src/test/testmc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAe,MAAM,uBAAuB,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,EAAE;IAClC,YAAY,MAAmB;QAC3B,KAAK,CAAC,MAAM,CAAC,CAAC;QACd,OAAO,IAAI,CAAC,GAAG,CAAC;IACpB,CAAC;IAED,OAAO;IAEP,CAAC;CACJ"}

package/public/test.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Micro Components Manual Test</title>
-		<link
-			rel="icon"
-			type="image/svg+xml"
-			sizes="any"
-			href="MicroComponents.svg"
-		/>
-		<link href="./my-tag.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
-			autoload(true); // automatically load web components that are undefined
-		</script>
-		<script type="module" src="./test.js"></script>
-	</head>
-	<body>
-		<test-grandparent></test-grandparent>
-		<test-testform _mc="test-testmc"></test-testform>
-		Open the debugger, read console, then:<br />
-	</body>
-</html>