@twobirds/microcomponents 0.0.48 → 0.0.51

package/public/src/test.ts

@@ -1,174 +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();
-
-// create 100 elements
-for (let x = 0; x < 1000; 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 1000 web components (3000 classes): %c %s ms.',
-		'font-weight: bold; color: black;',
-		'font-weight: normal;',
-		'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\n'
-	);
-
-	// will trigger the event on all micro components contained in <my-tag>
-	DC.trigger(element, 'doSomething');
-}, 500);

package/public/test.html

@@ -1,23 +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" />
-		<script src="./microcomponents.min.js"></script>
-		<script>
-			Object.assign(window, microcomponents); // make global
-		</script>
-		<script type="module" src="./test.js"></script>
-	</head>
-	<body>
-		Open the debugger, read console, then:<br />
-	</body>
-</html>

package/public/test.js

@@ -1,79 +0,0 @@
-'use strict';
-import { DC, defineCE, getCE, observe, } from './microcomponents.js';
-class Translator extends DC {
-    #translations = {};
-    Language = 'en';
-    Translation = {};
-    constructor(target, translations, translationTargetObject) {
-        super(target);
-        let that = this;
-        that.Language = 'en';
-        that.Translation = {};
-        observe(that);
-        that.#translations = translations;
-        that.Language.observe((lang) => {
-            if (that.#translations.hasOwnProperty(lang)) {
-                that.Translation = { lang: that.#translations[lang] };
-            }
-        });
-        that.Translation.bind(translationTargetObject);
-        that.target.setAttribute('language', 'en');
-        that.Language.notify();
-        delete that._mc;
-    }
-    onAttributeChanged(ev) {
-        if (!ev.data.newValue)
-            return;
-        switch (ev.data.name) {
-            case 'language':
-                this.Language = ev.data.newValue;
-                break;
-        }
-    }
-}
-defineCE('my-tag', class MyTag extends DC {
-    #template = '<button>{lang.click} {counter}</button>';
-    #languages = {
-        en: {
-            click: 'click me',
-        },
-        de: {
-            click: 'klick mich',
-        },
-    };
-    Dom = {};
-    constructor(target) {
-        super(target);
-        let that = this;
-        target.innerHTML = this.#template;
-        DC.add(target, 'translator', new Translator(target, that.#languages, target));
-        delete that._mc;
-    }
-    oneInit(ev) {
-        let that = this;
-        that.Dom = { counter: 0 };
-        observe(that);
-        that.Dom.bind(that.target);
-    }
-    onClick(ev) {
-        const that = this, c = that.Dom.counter++;
-        ev.data.stopPropagation();
-        that.target.classList.remove('clicked');
-        that.target.classList.add(that.Dom.counter > 9 ? 'overClicked' : 'clicked');
-    }
-}, ['language']);
-let MyTag = getCE('my-tag'), fragment = new DocumentFragment();
-let start = new Date().getTime();
-for (let x = 0; x < 1000; x++) {
-    fragment.append(new MyTag());
-}
-let end = new Date().getTime();
-document.body.appendChild(fragment);
-setTimeout(() => {
-    console.log('%c \n\nStress Test:\n\n %cInstancing 1000 web components (3000 classes): %c %s ms.', 'font-weight: bold; color: black;', 'font-weight: normal;', '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\n');
-    DC.trigger(element, 'doSomething');
-}, 500);
-//# sourceMappingURL=test.js.map

package/public/test.js.map

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