@twobirds/microcomponents 0.0.21 → 0.0.23

package/src/test.js

@@ -1,247 +1,166 @@
-function getMicroComponents(elements, search) {
-	let mcValues = [];
-	elements.forEach((e) => {
-		if (e) {
-			if (e instanceof HTMLElement) {
-				const _mc = e?._mc;
-				if (!search && _mc) {
-					mcValues = mcValues.concat(Object.values(e._mc));
-				} else if (search && _mc && _mc[search]) {
-					mcValues.push(_mc[search]);
-				}
-			}
-		}
-	});
-	return mcValues;
-}
-function traverseNodes(node, search, firstonly = true) {
-	let mcValues = [];
-	while (node) {
-		if (node._mc) {
-			if (!search) {
-				mcValues = mcValues.concat(Object.values(node._mc));
-			} else if (search && node._mc[search]) {
-				mcValues.push(node._mc[search]);
-			}
-			if (firstonly) return mcValues;
-		}
-		node = node.parentNode;
+"use strict";
+
+import { MC, DC } from "./MC.js";
+import { defineCE, getCE } from "./customElements.js";
+import { makeCO } from "./customObservables.js";
+
+//MC.debug = true;
+
+class Adder {
+	constructor() {}
+
+	sum(...numbers) {
+		return numbers.reduce((acc, curr) => acc + curr, 0);
 	}
-	return mcValues;
 }
-function isDOM(element) {
-	return element && element instanceof HTMLElement;
-}
-class MC {
-	#target = {};
-	#_mc = {};
-	static debug = false;
+
+class EvTarget extends MC {
 	constructor(target) {
-		this.#target = target;
-		this.#_mc = {};
-	}
-	get _mc() {
-		if (!MC.debug) return undefined;
-		return this.#_mc;
-	}
-	get target() {
-		return this.#target;
-	}
-	static siblings(target, search = "") {
-		const mc = target;
-		if (!mc._mc) {
-			return [];
-		}
-		const _mc = mc._mc;
-		if (search.length) {
-			return _mc?.[search] || [];
-		}
-		return [...Object.values(_mc)];
-	}
-	static add(target, key, element = {}) {
-		let node = target;
-		if (!node._mc) {
-			node._mc = new MC(target);
-		}
-		const _mc = node._mc;
-		if (key.length && !_mc[key]) {
-			_mc[key] = element;
-			if (target instanceof HTMLElement) {
-				target.setAttribute("_mc", "");
-			}
-		}
-		return element;
-	}
-	static remove(target, key) {
-		if (!key) return;
-		const _mc = target?._mc || {};
-		if (_mc && _mc[key]) {
-			delete _mc[key];
-		}
-		if (
-			!Object.keys(_mc).length &&
-			target instanceof HTMLElement &&
-			target.hasAttribute("_mc")
-		) {
-			target.removeAttribute("_mc");
-		}
-		return;
-	}
-	add(key, element, target) {
-		if (this.#_mc[key]) return;
-		if (target) {
-			MC.add(target, key, element);
-		}
-		this.#_mc[key] = element;
-		return element;
+		super(target);
 	}
-	remove(key, target) {
-		const _mc = this.#_mc;
-		const t = target;
-		if (target) {
-			MC.remove(t, key);
-		}
-		delete _mc?.[key];
+
+	onCustomEvent(ev) {
+		let logger = this.target?.target?._mc?.logger;
+		logger?.log("onCustomEvent", ev);
 	}
-	siblings(search = "") {
-		const _mc = this.#_mc;
-		if (!_mc) return [];
-		const result = _mc[search || ""];
-		return search && result ? [result] : [...Object.values(_mc)];
+
+	oneInit(ev) {
+		let logger = this.target?.target?._mc?.logger;
+		logger?.warn("EvTarget .oneInit(ev)", ev);
 	}
-	parent(search = "") {
-		if (!isDOM(this.#target)) return [];
-		return traverseNodes(this.#target.parentNode, search, true);
+}
+
+class Logger extends DC {
+	constructor(target, logger, prefix) {
+		// 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;
 	}
-	parents(search = "") {
-		if (!isDOM(this.#target)) return [];
-		return traverseNodes(this.#target.parentNode, search, false);
+
+	log() {
+		this.stdOut.log(this.prefix, this.target.constructor.name, ...arguments);
 	}
-	children(search = "") {
-		if (!isDOM(this.#target)) return [];
-		const id = Math.random().toString().replace(".", "");
-		const selector = '[_mc]:not([temp_id="' + id + '"] [_mc] [_mc])';
-		this.#target.setAttribute("temp_id", id);
-		const myDomElements = this.#target.querySelectorAll(selector);
-		const mcValues = getMicroComponents([...myDomElements], search);
-		this.#target.removeAttribute("temp_id");
-		return mcValues;
+
+	info() {
+		this.stdOut.info(this.prefix, this.target.constructor.name, ...arguments);
 	}
-	descendants(search = "") {
-		if (!isDOM(this.#target)) return [];
-		const myDomElements = this.#target.querySelectorAll("*[_mc]");
-		return getMicroComponents([...myDomElements], search);
+	warn() {
+		this.stdOut.warn(this.prefix, this.target.constructor.name, ...arguments);
 	}
 }
 
-// create test page if necessary, otherwise test what is present
-if (window.location.hostname.indexOf("gitlab") > -1) {
-	document.body.innerHTML = `<div class="level_1"><span><div class="level_2"><span><div class="level_3"><span><div class="level_4"><span><div class="level_5"></div><div class="level_5"></div><div class="level_5"></div><div class="level_5"></div><div class="level_5"></div></span></div></span></div></span></div></span></div>`;
+defineCE(
+	// equivalent to custom element registry .define()
+	"my-tag",
+	class MyTag extends DC {
+		constructor(target, data) {
+			super(target);
 
-	let elements = [...document.querySelectorAll("div")].reverse();
-	elements.forEach((e) => (e.innerHTML = e.innerHTML.repeat(5)));
+			let that = this; // minifier help
 
-	document.body.innerHTML = document.body.innerHTML.repeat(5);
-	document.body.innerHTML =
-		document.body.innerHTML +
-		"<span>F12 opens the debugger, console has some manual tests...</span>";
-}
+			// state  observables
+			that.In = data;
+			that.Counter = 0;
 
-// create an inner micro component class
-class MyInnerMC extends MC {
-	constructor(target) {
-		super(target);
-	}
+			// convert all props defined so far into custom observables
+			makeCO(that);
 
-	doSomething() {
-		console.log(this, " myInnerMC something done");
-		console.log(this.siblings());
-	}
-}
+			DC.add(target, "logger", new Logger(target, console, "[logger]"));
 
-// create a custom micro component class
-class MyMC extends MC {
-	#myInner;
+			// render
+			target.innerHTML = "Click Me";
 
-	constructor(target) {
-		super(target);
+			// automatically attach native DOM event handlers
+			that.autoAttachListeners();
+		}
 
-		//add a micro component
-		this.add("myInnerMC", new MyInnerMC(target));
+		/*
+		web component specific event handlers
+		*/
 
-		// add a private MC
-		this.#myInner = new MyInnerMC(target);
-	}
+		onConnected(ev) {
+			this.target._mc?.logger.info("onConnected handler", ev);
+		}
 
-	doSomething() {
-		console.log(this, "myMC something done");
-		this.#myInner.doSomething();
-	}
-}
+		onAttributeChanged(ev) {
+			let logger = this.target._mc?.logger;
+			logger?.info("onAttributeChanged handler", ev);
+		}
 
-console.time("MC creation time");
-// get some element from the DOM
-const domElement = document.querySelector("div");
-
-// Add the custom micro component instance to the target element
-MC.add(domElement, "myFirstMC", new MyMC(domElement));
-
-// Add the custom micro component instance to every div
-document.querySelectorAll("div").forEach((e) => {
-	MC.add(e, "myPublicMC1", new MyMC(e));
-	MC.add(e, "myPublicMC2", new MyMC(e));
-});
-
-console.timeEnd("MC creation time");
-
-let c = document.querySelectorAll("[_mc]");
-console.info(
-	"number of DOM nodes:",
-	document.querySelectorAll("*").length,
-	"\nnumber of DOM nodes containing micro components:",
-	c.length,
-	"\nnumber of top level micro components:",
-	c.length * 2 + 1, // TODO write reducer
-	"\nnumber of top level & inner micro components:",
-	c.length * 6 + 2 // TODO write reducer
-);
+		/*
+		native event handlers
+		*/
+		oneClick(ev) {
+			let logger = this.target._mc?.logger;
 
-console.warn("domElement = first DIV element:", domElement);
-console.log("domElement\n  ._mc", domElement._mc);
-console.log("domElement\n  ._mc\n  .myFirstMC", domElement._mc.myFirstMC);
-console.log(
-	"domElement\n  ._mc\n  .myFirstMC\n  ._mc (MC.debug = false)",
-	domElement._mc.myFirstMC._mc
-);
-MC.debug = true;
-console.log(
-	"domElement\n  ._mc\n  .myFirstMC\n  ._mc  (MC.debug = true)",
-	domElement._mc.myFirstMC._mc
-);
-MC.debug = false;
+			logger.info("oneClick handler", ev);
+
+			this._mc.customEventTarget.trigger("customEvent");
 
-/*
-test selectors
-*/
+			this.target.setAttribute("my-attribute", "testValue");
+		}
 
-let sc = c[2]._mc.myPublicMC1; // 3rd level DIV micro component
-console.warn("sc = some div in the middle of the tree, level 3 of 5", sc);
+		onClick(ev) {
+			let logger = this.target._mc?.logger;
 
-console.log("number of sc parents (expect 5)", sc.parents());
-console.log("number of sc parent (expect 2)", sc.parent());
-console.log(
-	"sc PUBLIC siblings (expect 2)",
-	sc.target.className,
-	Object.keys(sc.target._mc),
-	sc.target._mc
+			logger?.info("onClick handler", ev);
+
+			this.Counter++;
+		}
+
+		/*
+		DC custom event handlers
+		*/
+		oneInit(ev) {
+			let that = this;
+
+			// add a public logger
+			//that.target._mc.logger = new Logger(that.target, console, "[Logger]");
+
+			let logger = that.target._mc.logger;
+
+			logger.warn("oneInit handler", ev);
+
+			// add a private event target
+			that._mc.customEventTarget = new EvTarget(that);
+
+			// add a private adder
+			that._mc.Adder = new Adder();
+
+			// add callback for this.Counter changes
+			that.Counter.observe((value) => {
+				logger.log("Counter has changed to: " + value);
+			});
+
+			logger.log("add 1,2,3 =", that._mc.Adder.sum(1, 2, 3));
+		}
+
+		onDoSomething(ev) {
+			let logger = this.target._mc?.logger;
+			logger?.log(".onDoSomething(ev): something done...", ev);
+		}
+	},
+	["my-attribute"]
 );
-console.log("sc PRIVATE siblings (MC.debug = false, expect undefined)", sc._mc);
-MC.debug = true;
+
+let MyTag = getCE("my-tag");
+document.body.appendChild(new MyTag("my-data"));
+let element = document.querySelector("my-tag");
+
 console.log(
-	"sc PRIVATE siblings (MC.debug = true, expect 1)",
-	Object.keys(sc._mc).length,
-	sc._mc
+	"\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"
 );
-MC.debug = false;
-console.log("number of sc children (expect 10)", sc.children());
-console.log("number of sc descendants (expect 260)", sc.descendants());
+
+// will trigger the event on all micro components contained in <my-tag>
+DC.trigger(element, "doSomething");

package/tsconfig.json

@@ -4,7 +4,7 @@
 
     /* Projects */
     // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
-    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    ///////"composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
     // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
     // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
@@ -66,7 +66,7 @@
     // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
     // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
     // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
-    "declarationDir": "./build",                           /* Specify the output directory for generated declaration files. */
+    //"declarationDir": "./build/types",                           /* Specify the output directory for generated declaration files. */
     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 
     /* Interop Constraints */

package/typedoc.json

@@ -1,5 +1,5 @@
 {
-	"entryPoints": ["src/microcomponents.ts","src/microcomponents.es3.js"],
+	"entryPoints": ["src/MCbundle.ts","src/MCIbundle.ts","src/MC.ts","src/MCI.ts","src/convenienceobservables.ts","src/formvalues.ts","src/customelements.ts"],
 	"out": "./public/",
 	"readme": "README.md",
 	"name": "Micro Components",

package/webpack.config.js

@@ -0,0 +1,233 @@
+const path = require("path");
+
+module.exports = [
+	{
+		entry: "./build/MC.js",
+		mode: "production",
+		output: {
+			path: path.resolve(__dirname, "dist"),
+			filename: "MC.min.js",
+			libraryTarget: "umd",
+			library: "MC",
+			globalObject: "this",
+		},
+		module: {
+			rules: [
+				{
+					// test: /\.tsx?$/,
+					use: [
+						{
+							loader: "ts-loader",
+							options: {
+								transpileOnly: true, // Avoid type checking during webpack build
+								compilerOptions: {
+									declaration: false, // Generate .d.ts files
+									declarationMap: false, // Generate .d.ts.map files
+									outDir: "build/types", // Output .d.ts and .d.ts.map to a different directory
+								},
+							},
+						},
+					],
+					exclude: /node_modules/,
+				},
+			],
+		},
+		resolve: {
+			extensions: [".tsx", ".ts", ".js"],
+		},
+		optimization: {
+			minimize: false, // Enable minification
+		},
+	},
+	{
+		entry: "./build/customElements.js",
+		mode: "production",
+		output: {
+			path: path.resolve(__dirname, "dist"),
+			filename: "customElements.min.js",
+			libraryTarget: "umd",
+			library: "customElements",
+			globalObject: "this",
+		},
+		module: {
+			rules: [
+				{
+					// test: /\.tsx?$/,
+					use: [
+						{
+							loader: "ts-loader",
+							options: {
+								transpileOnly: true, // Avoid type checking during webpack build
+								compilerOptions: {
+									declaration: false, // Generate .d.ts files
+									declarationMap: false, // Generate .d.ts.map files
+									outDir: "build/types", // Output .d.ts and .d.ts.map to a different directory
+								},
+							},
+						},
+					],
+					exclude: /node_modules/,
+				},
+			],
+		},
+		resolve: {
+			extensions: [".tsx", ".ts", ".js"],
+		},
+		optimization: {
+			minimize: true, // Enable minification
+		},
+	},
+	{
+		entry: "./build/customSelectors.js",
+		mode: "production",
+		output: {
+			path: path.resolve(__dirname, "dist"),
+			filename: "customSelectors.min.js",
+			libraryTarget: "umd",
+			library: "customSelectors",
+			globalObject: "this",
+		},
+		module: {
+			rules: [
+				{
+					// test: /\.tsx?$/,
+					use: [
+						{
+							loader: "ts-loader",
+							options: {
+								transpileOnly: true, // Avoid type checking during webpack build
+								compilerOptions: {
+									declaration: false, // Generate .d.ts files
+									declarationMap: false, // Generate .d.ts.map files
+									outDir: "build/types", // Output .d.ts and .d.ts.map to a different directory
+								},
+							},
+						},
+					],
+					exclude: /node_modules/,
+				},
+			],
+		},
+		resolve: {
+			extensions: [".tsx", ".ts", ".js"],
+		},
+		optimization: {
+			minimize: true, // Enable minification
+		},
+	},
+	{
+		entry: "./build/formValues.js",
+		mode: "production",
+		output: {
+			path: path.resolve(__dirname, "dist"),
+			filename: "formvValues.min.js",
+			libraryTarget: "umd",
+			library: "formValues",
+			globalObject: "this",
+		},
+		module: {
+			rules: [
+				{
+					// test: /\.tsx?$/,
+					use: [
+						{
+							loader: "ts-loader",
+							options: {
+								transpileOnly: true, // Avoid type checking during webpack build
+								compilerOptions: {
+									declaration: false, // Generate .d.ts files
+									declarationMap: false, // Generate .d.ts.map files
+									outDir: "build/types", // Output .d.ts and .d.ts.map to a different directory
+								},
+							},
+						},
+					],
+					exclude: /node_modules/,
+				},
+			],
+		},
+		resolve: {
+			extensions: [".tsx", ".ts", ".js"],
+		},
+		optimization: {
+			minimize: true, // Enable minification
+		},
+	},
+	{
+		entry: "./build/customObservables.js",
+		mode: "production",
+		output: {
+			path: path.resolve(__dirname, "dist"),
+			filename: "customObservables.min.js",
+			libraryTarget: "umd",
+			library: "customObservables",
+			globalObject: "this",
+		},
+		module: {
+			rules: [
+				{
+					// test: /\.tsx?$/,
+					use: [
+						{
+							loader: "ts-loader",
+							options: {
+								transpileOnly: true, // Avoid type checking during webpack build
+								compilerOptions: {
+									declaration: false, // Generate .d.ts files
+									declarationMap: false, // Generate .d.ts.map files
+									outDir: "build/types", // Output .d.ts and .d.ts.map to a different directory
+								},
+							},
+						},
+					],
+					exclude: /node_modules/,
+				},
+			],
+		},
+		resolve: {
+			extensions: [".tsx", ".ts", ".js"],
+		},
+		optimization: {
+			minimize: true, // Enable minification
+		},
+	},
+	// bundle files
+	{
+		entry: "./build/microcomponents.js",
+		mode: "production",
+		output: {
+			path: path.resolve(__dirname, "dist"),
+			filename: "microcomponents.min.js",
+			libraryTarget: "umd",
+			library: "microcomponents",
+			globalObject: "this",
+		},
+		module: {
+			rules: [
+				{
+					// test: /\.tsx?$/,
+					use: [
+						{
+							loader: "ts-loader",
+							options: {
+								transpileOnly: true, // Avoid type checking during webpack build
+								compilerOptions: {
+									declaration: false, // Generate .d.ts files
+									declarationMap: false, // Generate .d.ts.map files
+									outDir: "build/types", // Output .d.ts and .d.ts.map to a different directory
+								},
+							},
+						},
+					],
+					exclude: /node_modules/,
+				},
+			],
+		},
+		resolve: {
+			extensions: [".tsx", ".ts", ".js"],
+		},
+		optimization: {
+			minimize: true, // Enable minification
+		},
+	},
+];