@twobirds/microcomponents 0.0.34 → 0.0.39

package/dist/test.ts

@@ -1,211 +1,190 @@
-"use strict";
-
-import { MC, DC, McEvent, defineCE, getCE, observe } from "./microcomponents.js";
-
-//import { MC, DC, typeof McEvent } from "./MC.js";
-//import { defineCE, getCE } from "./customElements.js";
-//import { observe } from "./customObservables.js";
+'use strict';
+
+import {
+	LooseObject,
+	MC,
+	DC,
+	McEvent,
+	defineCE,
+	getCE,
+	observe,
+	Observable,
+} from './microcomponents.js';
+
+//import { MC, DC, McEvent } from "./MC.js";
+//import { defineCE, getCE } from "./elements.js";
+//import { observe } from "./observables.js";
 
 //MC.debug = true;
 
-class Adder {
-	constructor() {}
-
-	sum(...numbers: number[]): number {
-		return numbers.reduce((acc: number, curr: number) => acc + curr, 0);
-	}
-}
+class Translator extends DC {
+	#translations: LooseObject = {};
 
-class DeeplyNestedEvTarget extends MC {
-	constructor(target: any) {
-		super(target);
-	}
+	Language: unknown = 'en';
+	Translation: unknown = {};
 
-	oneInit(ev: typeof McEvent) {
-		let logger = this.target?.target?.target?._mc?.logger;
-		//logger?.warn("DeeplyNestedEvTarget .oneInit(ev)", ev);
-	}
-}
+	constructor(
+		target: HTMLElement | ShadowRoot | DocumentFragment,
+		translations: LooseObject,
+		translationTargetObject: HTMLElement
+	) {
+		super(target as HTMLElement);
+		let that = this; // minifier help
 
-class EvTarget extends MC {
-	constructor(target: any) {
-		super(target);
-	}
+		// state
+		that.Language = 'en';
+		that.Translation = {};
 
-	onCustomEvent(ev: typeof McEvent) {
-		let logger = this.target?.target?._mc?.logger;
-		logger?.log("onCustomEvent", ev);
-	}
+		observe(that);
 
-	oneInit(ev: typeof McEvent) {
-		let that = this,
-			_mc = that._mc!,
-			logger = this.target?.target?._mc?.logger;
+		// setup
+		that.#translations = translations;
 
-		//logger?.warn("EvTarget .oneInit(ev)", ev);
+		// state
+		(that.Language as Observable).observe((lang) => {
+			if (that.#translations.hasOwnProperty(lang)) {
+				that.Translation = { lang: that.#translations[lang] }; // set translation
+			}
+		});
 
-		_mc.deeplyNestedEvTarget = new DeeplyNestedEvTarget( that );
-	}
-}
+		(that.Translation as Observable).bind(translationTargetObject);
 
-class Logger extends DC {
+		this.target.setAttribute('language', 'en');
 
-	prefix: string = "";
-
-	stdOut: typeof console = console;
-
-	constructor(target: HTMLElement, logger: typeof console, prefix: string) {
-		// logger must implement the console interface
-		super(target);
-
-		let that = this; // scoping and minifier help
-
-		that.prefix = prefix;
-
-		// instance that handles logging, depency injection
-		that.stdOut = logger;
+		(this.Language as Observable).notify();
 	}
 
-	log() {
-		this.stdOut.log(this.prefix, this.target.constructor.name, ...arguments);
+	oneInit() {
+		//(this.Language as Observable).notify(); // trigger translation
 	}
 
-	info() {
-		this.stdOut.info(this.prefix, this.target.constructor.name, ...arguments);
-	}
-	warn() {
-		this.stdOut.warn(this.prefix, this.target.constructor.name, ...arguments);
+	onAttributeChanged(ev: McEvent) {
+		if (!ev.data.newValue) return;
+
+		let that = this;
+
+		switch (ev.data.name) {
+			case 'language':
+				that.Language = ev.data.newValue;
+				break;
+		}
 	}
 }
 
 defineCE(
 	// equivalent to custom element registry .define()
-	"my-tag",
+	'my-tag',
 	class MyTag extends DC {
+		#template: string = '<button>{lang.click} {counter}</button>';
 
-		In: string = "";
+		#languages = {
+			en: {
+				click: 'click me',
+			},
+			de: {
+				click: 'klick mich',
+			},
+		};
 
-		Counter: number = 0;
+		Dom: LooseObject = {};
 
-		constructor(target: HTMLElement, data: string) {
+		constructor(target: HTMLElement) {
 			super(target);
 
 			let that = this; // minifier help
 
-			// state  observables
-			that.In = data;
-			that.Counter = 0;
-
-			// convert all props defined so far into custom observables
-			observe(that);
-
-			DC.add(target, "logger", new Logger(target, console, "[logger]"));
+			// hide
+			target.setAttribute('style', 'display:none');
 
 			// render
-			target.innerHTML = "Click Me";
-		}
-
-		/*
-		web component specific event handlers
-		*/
-
-		onConnected(ev: typeof McEvent) {
-			//this.target._mc?.logger.info("onConnected handler", ev);
+			target.innerHTML = this.#template;
+
+			// add public translator
+			DC.add(
+				target,
+				'translator',
+				new Translator(target, that.#languages, target)
+			);
 		}
 
-		onAttributeChanged(ev: typeof McEvent) {
-			let logger = this.target._mc?.logger;
-			//logger?.info("onAttributeChanged handler", ev);
-		}
+		oneInit(ev: McEvent) {
+			let that = this;
 
-		/*
-		native event handlers
-		*/
-		oneClick(ev: typeof McEvent) {
-			let logger = this.target._mc?.logger;
+			// state
+			that.Dom = { counter: 0 };
 
-			logger.info("oneClick handler", ev);
+			// state: convert all props defined so far into observables
+			observe(that);
 
-			this._mc.customEventTarget.trigger("customEvent");
+			// bind Dom to target
+			(that.Dom as Observable).bind(that.target);
 
-			this.target.setAttribute("my-attribute", "testValue");
+			// show
+			setTimeout(() => that.target.removeAttribute('style'), 100);
 		}
 
-		onClick(ev: typeof McEvent) {
-			let logger = this.target._mc?.logger;
-
-			logger?.info("onClick handler", ev);
-
-			this.Counter++;
+		onAttributeChanged(ev: McEvent) {
+			//console.log(ev);
+			this.target._mc.translator.Language = ev.data.newValue;
 		}
 
-		/*
-		DC custom event handlers
-		*/
-		oneInit(ev: typeof McEvent) {
-			let that = this,
-				_mc = that._mc;
-
-			let logger = that.target._mc.logger;
-
-			//logger.warn("oneInit handler", ev);
-
-			// add a private event target
-			_mc.customEventTarget = new EvTarget(that);
-
-			// add a private adder
-			_mc.Adder = new Adder();
-
-			// add callback for this.Counter changes
-			( that.Counter as any).observe((value: number) => {
-				logger.log("Counter has changed to: " + value);
-			});
-
-			//logger.log("add 1,2,3 =", _mc.Adder.sum(1, 2, 3));
-		}
-
-		onDoSomething(ev: typeof McEvent) {
-			let logger = this.target._mc?.logger;
-			logger?.log(".onDoSomething(ev): something done...", ev);
+		onClick(ev: McEvent) {
+			this.Dom.counter++;
+			(this.target as HTMLElement).classList.add('clicked');
 		}
 	},
-	["my-attribute"]
+	['language']
 );
 
-let MyTag: CustomElementConstructor = getCE("my-tag")!,
+let MyTag: CustomElementConstructor = getCE('my-tag')!,
 	fragment = new DocumentFragment();
 
-// stress test
-console.time("Instancing");
-// create 1000 elements
-for ( let x = 0; x < 1000; x ++ ){
-	fragment.append( new MyTag("my-data") );
+/*
+stress test
+*/
+
+let start = new Date().getTime();
+
+// create 100 elements
+for (let x = 0; x < 100; x++) {
+	fragment.append(new MyTag());
 }
-document.body.appendChild( fragment );
 
-console.log(
-	'%c \n\nStress Test:\n\n %cInstancing 1000 classes and putting them in the DOM took (ms):',
-	"font-weight: bold; color: black;",
-	"color: black;"
-);
-console.timeEnd("Instancing");
+let end = new Date().getTime();
 
-document.querySelectorAll('my-tag').forEach( (e) => e.remove() );
+// and put them into the DOM
+document.body.appendChild(fragment);
 
-// and put them into thwe DOM
+//document.querySelectorAll('my-tag').forEach((e) => e.remove());
 
-document.body.appendChild( new MyTag("my-data") );
+/*
+console test
+*/
 
-let element = document.querySelector("my-tag");
+setTimeout(() => {
+	console.clear();
 
-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(
+		'%c \n\nStress Test:\n\n %cInstancing 100 web components: %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");
+	// will trigger the event on all micro components contained in <my-tag>
+	DC.trigger(element, 'doSomething');
+}, 500);

package/package.json

@@ -1,54 +1,54 @@
 {
-  "name": "@twobirds/microcomponents",
-  "version": "0.0.34",
-  "description": "Micro Components Organization Class",
-  "main": "./dist/microcomponents.ts",
-  "types": "./dist/microcomponents.d.ts",
-  "sideEffects": false,
-  "scripts": {
-    "typedoc": "typedoc",
-    "webpack": "webpack",
-    "clean": "rm -rf build/*; rm -rf dist/*;",
-    "prep": "cp -R assets/* public || true; cp src/* build || true;",
-    "build": "npm run clean; npm run prep; tsc; npm run copyToDist; npm run webpack; cp dist/*.js public; cp dist/microcomponents.js build; cp build/*.js public; cp build/*.js.map public;",
-    "copyToDist": "cp -R assets/* public || true; cp build/*.ts* dist; cp MicroComponents.svg dist; cp MicroComponents.svg public/fiddle; cp dist/MicroComponents.svg public; cp dist/microcomponents.js public;"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "jsmin": "^1.0.1",
-    "ts-loader": "^9.5.2",
-    "typedoc": "^0.26.11",
-    "typescript": "^5.5.4",
-    "webpack": "^5.97.1",
-    "webpack-cli": "^6.0.1"
-  },
-  "keywords": [
-    "javascript",
-    "library",
-    "native",
-    "DOM manipulation",
-    "lightweight",
-    "standalone",
-    "SPA",
-    "PWA",
-    "ES3",
-    "ES5",
-    "ES6",
-    "ES7",
-    "ES2015",
-    "ES2016",
-    "client",
-    "API"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://gitlab.com/twoBirds/microcomponents"
-  },
-  "contributors": [
-    {
-      "name": "Frank Thürigen",
-      "email": "fthuerigen@gmail.com"
-    }
-  ]
+	"name": "@twobirds/microcomponents",
+	"version": "0.0.39",
+	"description": "Micro Components Organization Class",
+	"main": "./dist/microcomponents.ts",
+	"types": "./dist/microcomponents.d.ts",
+	"sideEffects": false,
+	"scripts": {
+		"typedoc": "typedoc",
+		"webpack": "webpack",
+		"clean": "rm -rf build/*; rm -rf dist/*;",
+		"prep": "cp -R assets/* public || true; cp src/* build || true;",
+		"build": "npm run clean; npm run prep; tsc; npm run copyToDist; npm run webpack; cp dist/*.js public; cp dist/microcomponents.js build; cp build/*.js public; cp build/*.js.map public;",
+		"copyToDist": "mkdir public/src || true; cp src/*.ts public/src || true; cp -R assets/* public || true; cp build/*.ts* dist; cp *.svg dist; cp *.svg public/fiddle; cp dist/MicroComponents.svg public; cp dist/microcomponents.js public;"
+	},
+	"author": "",
+	"license": "ISC",
+	"devDependencies": {
+		"jsmin": "^1.0.1",
+		"ts-loader": "^9.5.2",
+		"typedoc": "^0.26.11",
+		"typescript": "^5.5.4",
+		"webpack": "^5.97.1",
+		"webpack-cli": "^6.0.1"
+	},
+	"keywords": [
+		"javascript",
+		"library",
+		"native",
+		"DOM manipulation",
+		"lightweight",
+		"standalone",
+		"SPA",
+		"PWA",
+		"ES3",
+		"ES5",
+		"ES6",
+		"ES7",
+		"ES2015",
+		"ES2016",
+		"client",
+		"API"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://gitlab.com/twoBirds/microcomponents"
+	},
+	"contributors": [
+		{
+			"name": "Frank Thürigen",
+			"email": "fthuerigen@gmail.com"
+		}
+	]
 }