@twobirds/microcomponents 0.0.34 → 0.0.37

package/dist/test.ts

@@ -1,211 +1,187 @@
-"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 {
+	HTMLMcElement,
+	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() {}
+class Translator extends DC {
+	#translations: LooseObject = {};
 
-	sum(...numbers: number[]): number {
-		return numbers.reduce((acc: number, curr: number) => acc + curr, 0);
-	}
-}
+	Language: unknown = 'en';
+	Translation: unknown = {};
 
-class DeeplyNestedEvTarget extends MC {
-	constructor(target: any) {
-		super(target);
-	}
+	constructor(
+		target: HTMLElement | ShadowRoot | DocumentFragment,
+		translations: LooseObject,
+		translationTargetObject: HTMLElement
+	) {
+		super(target as HTMLElement);
+		let that = this; // minifier help
 
-	oneInit(ev: typeof McEvent) {
-		let logger = this.target?.target?.target?._mc?.logger;
-		//logger?.warn("DeeplyNestedEvTarget .oneInit(ev)", ev);
-	}
-}
+		// state
+		that.Language = 'en';
+		that.Translation = {};
 
-class EvTarget extends MC {
-	constructor(target: any) {
-		super(target);
-	}
+		observe(that);
 
-	onCustomEvent(ev: typeof McEvent) {
-		let logger = this.target?.target?._mc?.logger;
-		logger?.log("onCustomEvent", ev);
-	}
+		// setup
+		that.#translations = translations;
 
-	oneInit(ev: typeof McEvent) {
-		let that = this,
-			_mc = that._mc!,
-			logger = this.target?.target?._mc?.logger;
+		// state
+		(that.Language as Observable).observe((lang) => {
+			if (that.#translations.hasOwnProperty(lang)) {
+				that.Translation = { lang: that.#translations[lang] }; // set translation
+			}
+		});
 
-		//logger?.warn("EvTarget .oneInit(ev)", ev);
+		(that.Translation as Observable).bind(target);
 
-		_mc.deeplyNestedEvTarget = new DeeplyNestedEvTarget( that );
+		this.target.setAttribute('language', 'en');
 	}
-}
-
-class Logger extends DC {
-
-	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;
+	oneInit() {
+		(this.Language as Observable).notify(); // trigger translation
 	}
 
-	log() {
-		this.stdOut.log(this.prefix, this.target.constructor.name, ...arguments);
-	}
+	onAttributeChanged(ev: McEvent) {
+		if (!ev.data.newValue) return;
 
-	info() {
-		this.stdOut.info(this.prefix, this.target.constructor.name, ...arguments);
-	}
-	warn() {
-		this.stdOut.warn(this.prefix, this.target.constructor.name, ...arguments);
+		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 = '{lang.click} {counter}';
 
-		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]"));
-
 			// render
-			target.innerHTML = "Click Me";
+			target.innerHTML = this.#template;
+
+			// add public translator
+			DC.add(
+				target,
+				'translator',
+				new Translator(target, that.#languages, target)
+			);
 		}
 
-		/*
-		web component specific event handlers
-		*/
+		oneInit(ev: McEvent) {
+			let that = this;
 
-		onConnected(ev: typeof McEvent) {
-			//this.target._mc?.logger.info("onConnected handler", ev);
-		}
-
-		onAttributeChanged(ev: typeof McEvent) {
-			let logger = this.target._mc?.logger;
-			//logger?.info("onAttributeChanged handler", ev);
-		}
+			// state
+			that.Dom = { counter: 0 };
 
-		/*
-		native event handlers
-		*/
-		oneClick(ev: typeof McEvent) {
-			let logger = this.target._mc?.logger;
-
-			logger.info("oneClick handler", ev);
-
-			this._mc.customEventTarget.trigger("customEvent");
+			// state: convert all props defined so far into observables
+			observe(that);
 
-			this.target.setAttribute("my-attribute", "testValue");
+			// bind Dom to target
+			(that.Dom as Observable).bind(that.target);
 		}
 
-		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++;
 		}
 	},
-	["my-attribute"]
+	['language']
 );
 
-let MyTag: CustomElementConstructor = getCE("my-tag")!,
+let MyTag: CustomElementConstructor = getCE('my-tag')!,
 	fragment = new DocumentFragment();
 
-// stress test
-console.time("Instancing");
+/*
+stress test
+*/
+
+/*
+let start = new Date().getTime();
+
 // create 1000 elements
-for ( let x = 0; x < 1000; x ++ ){
-	fragment.append( new MyTag("my-data") );
+for (let x = 0; x < 1000; x++) {
+	let mt = new MyTag('my-data');
+	fragment.append(mt);
 }
-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 1000 web components: %c %s ms.',
+		'font-weight: bold; color: black;',
+		'font-weight: normal;',
+		'font-weight: bold; color: blue;',
+		0
+	);
+	*/
+
+	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');
+}, 20);

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.37",
+	"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"
+		}
+	]
 }

package/public/MC.js

@@ -1,15 +1,17 @@
-"use strict";
+'use strict';
 import { McEvent } from './McEvent.js';
-var isBrowser = new Function("try {return this===window;}catch(e){ return false;}");
+var isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
 let nativeEventNames = new Set();
 // HTMLElement native event names
 if (isBrowser()) {
-    Object.keys(HTMLElement.prototype).filter(key => /^on/.test(key)).forEach(eventName => nativeEventNames.add(eventName));
+    Object.keys(HTMLElement.prototype)
+        .filter((key) => /^on/.test(key))
+        .forEach((eventName) => nativeEventNames.add(eventName));
 }
 // get all microcomponents from a list of HTMLElements
 function getMicroComponents(elements, search) {
     let mcValues = [];
-    elements.forEach(e => {
+    elements.forEach((e) => {
         if (e) {
             if (e instanceof HTMLElement) {
                 const _mc = e?._mc;
@@ -91,7 +93,9 @@ function remove(target, key) {
         delete _mc[key];
     }
     // remove the _mc attribute if the DOM collection is empty
-    if (!Object.keys(_mc).length && target instanceof HTMLElement && target.hasAttribute('_mc')) {
+    if (!Object.keys(_mc).length &&
+        target instanceof HTMLElement &&
+        target.hasAttribute('_mc')) {
         target.removeAttribute('_mc');
     }
     return;
@@ -109,26 +113,25 @@ function trigger(target, ev, data = {}) {
     });
     return;
 }
-// run the "init" lifecycle event on the completemcr structure
+// run the "init" lifecycle event on the complete _mc structure
 function init(element) {
     if (element.constructor === DC)
         return;
     setTimeout(() => {
         element.trigger('Init');
-        setTimeout(() => {
-            let keys = Object.keys(element?._mc);
-            if (keys.length) {
+        /*
+            let keys = Object.keys( ( element as any)?._mc );
+            if ( keys.length ){
                 //console.log( 'inner Inits on [', mc.constructor.name, ']', keys );
-                keys?.forEach((key) => {
-                    let mc = element?._mc?.[key];
+                keys?.forEach( (key: string) => {
+                    let mc = ( element as any)?._mc?.[key];
                     //console.log( key, typeof mc?.oneInit, mc );
-                    if (mc['oneInit'] && typeof mc.oneInit == 'function') {
-                        mc.oneInit(new McEvent('Init'));
+                    if ( ( mc as any )['oneInit'] &&  typeof ( mc as any ).oneInit == 'function' ){
+                        ( mc as any ).oneInit( new McEvent('Init') );
                     }
                 });
-            }
-            ;
-        }, 0);
+            };
+            */
     }, 0);
 }
 function autoAttachListeners(element) {
@@ -137,13 +140,14 @@ function autoAttachListeners(element) {
     const target = element.target;
     if (target instanceof HTMLElement) {
         let that = element;
-        Object
-            .getOwnPropertyNames(that.constructor.prototype)
-            .filter(key => /^on[A-Z]|one[A-Z]/.test(key) && typeof that.constructor.prototype[key] === 'function')
-            .forEach(key => {
+        Object.getOwnPropertyNames(that.constructor.prototype)
+            .filter((key) => /^on[A-Z]|one[A-Z]/.test(key) &&
+            typeof that.constructor.prototype[key] === 'function')
+            .forEach((key) => {
             let once = /^one/.test(key), withoutOnOne = key.replace(/^on[e]{0,1}/, ''), // preserves upper/lowercase for non-native events
-            nativeEventName = withoutOnOne.toLowerCase(), listener = (ev) => { that.trigger(withoutOnOne, ev); };
-            ;
+            nativeEventName = withoutOnOne.toLowerCase(), listener = (ev) => {
+                that.trigger(withoutOnOne, ev);
+            };
             if (once) {
                 // console.log( '...is only called once', that.constructor.prototype[key] );
                 Object.defineProperty(element, 'on' + withoutOnOne, {
@@ -152,11 +156,12 @@ function autoAttachListeners(element) {
                     writable: true,
                     value: (ev) => {
                         // console.log( 'onceHandler execute:', that.constructor.prototype[key] );
-                        (that.constructor.prototype[key]).bind(that)(ev);
-                    }
+                        that.constructor.prototype[key].bind(that)(ev);
+                    },
                 });
             }
-            if (nativeEventNames.has('on' + nativeEventName)) { // native event defined in HTMLElement
+            if (nativeEventNames.has('on' + nativeEventName)) {
+                // native event defined in HTMLElement
                 // console.log('added as native listener', target, nativeEventName );
                 addListener(target, nativeEventName, listener, false, once);
             }
@@ -165,7 +170,7 @@ function autoAttachListeners(element) {
 }
 class McBase {
     #target; // avoid circular reference
-    constructor(target) {
+    constructor(target, debug = false) {
         let that = this, element = that;
         this.#target = new WeakRef(target || {});
         init(element); // async lifecycle event
@@ -188,7 +193,8 @@ class MC extends McBase {
         // run all triggers
         if (that.constructor === MC || that.constructor === DC) {
             [...Object.getOwnPropertyNames(that)].forEach((mc) => {
-                if (that[mc]?.trigger && typeof that[mc]?.trigger === 'function') {
+                if (that[mc]?.trigger &&
+                    typeof that[mc]?.trigger === 'function') {
                     that[mc]?.trigger(ev, data, bubble);
                 }
             });
@@ -196,15 +202,17 @@ class MC extends McBase {
         }
         // only this instance
         if (that instanceof MC || that instanceof DC) {
-            const that = this, mcEvent = typeof ev !== 'string' ? ev : new McEvent(ev, data, bubble), handlerName = 'on' + mcEvent.type[0].toUpperCase() + mcEvent.type.slice(1);
-            ;
+            const that = this, mcEvent = typeof ev !== 'string'
+                ? ev
+                : new McEvent(ev, data, bubble), handlerName = 'on' + mcEvent.type[0].toUpperCase() + mcEvent.type.slice(1);
             // console.log('trigger', handlerName, mcEvent, data, bubble );
             if (mcEvent.bubble.indexOf('l') > -1) {
-                if (!mcEvent.immediateStopped
-                    && typeof that[handlerName] === 'function') {
+                if (!mcEvent.immediateStopped &&
+                    typeof that[handlerName] === 'function') {
                     // console.log( 'execute handler:', handlerName );
                     that[handlerName](mcEvent);
-                    if (that.hasOwnProperty(handlerName)) { // it is a once handler
+                    if (that.hasOwnProperty(handlerName)) {
+                        // it is a once handler
                         delete that[handlerName]; // remove after first execution
                     }
                 }
@@ -215,7 +223,9 @@ class MC extends McBase {
             }
             // at this point, either 'u' or 'd' bubbling should be indicated
             // mcEvent bubbling is asynchronous, and the order of target MC execution in case of multiple matches is not guaranteed!
-            if (isBrowser() && /[ud]/.test(mcEvent.bubble) && that instanceof MC) {
+            if (isBrowser() &&
+                /[ud]/.test(mcEvent.bubble) &&
+                that instanceof MC) {
                 setTimeout(() => {
                     // bubbling must include 'l' for local, or else no handlers are executed'
                     if (mcEvent.bubble.indexOf('l') === -1) {
@@ -223,17 +233,13 @@ class MC extends McBase {
                     }
                     // bubble up towards root
                     if (mcEvent.bubble.indexOf('u') > -1) {
-                        that
-                            .parent()
-                            .forEach((mc) => {
+                        that.parent().forEach((mc) => {
                             mc instanceof MC ? mc.trigger(mcEvent) : null;
                         });
                     }
                     // bubble down
                     if (mcEvent.bubble.indexOf('d') > -1) {
-                        that
-                            .children()
-                            .forEach((mc) => {
+                        that.children().forEach((mc) => {
                             mc instanceof MC ? mc.trigger(mcEvent) : null;
                         });
                     }
@@ -242,20 +248,17 @@ class MC extends McBase {
         }
     }
 }
-;
 class DC extends McBase {
     _mc = {};
-    constructor(target) {
+    constructor(target, debug = false) {
         super(target);
     }
-    static debug = false;
     static add = add;
     static remove = remove;
     static trigger = trigger;
     trigger(ev, data = {}, bubble) {
         MC.prototype.trigger.call(this, ev, data, bubble);
     }
-    ;
     parent(search = '') {
         let target = this.target;
         if (!isDOM(target))
@@ -288,6 +291,5 @@ class DC extends McBase {
         return getMicroComponents([...myDomElements], search);
     }
 }
-;
 export { addListener, removeListener, McBase, MC, DC, McEvent };
 //# sourceMappingURL=MC.js.map