@twobirds/microcomponents 0.0.46 → 0.0.50

package/src/test.ts

@@ -42,21 +42,18 @@ class Translator extends DC {
 
 		(that.Translation as Observable).bind(translationTargetObject);
 
-		this.target.setAttribute('language', 'en');
+		that.target.setAttribute('language', 'en');
 
-		(this.Language as Observable).notify();
+		(that.Language as Observable).notify();
 
 		delete that._mc; // cleanup, not needed
 	}
 
 	onAttributeChanged(ev: McEvent) {
 		if (!ev.data.newValue) return;
-
-		let that = this;
-
 		switch (ev.data.name) {
 			case 'language':
-				that.Language = ev.data.newValue;
+				this.Language = ev.data.newValue;
 				break;
 		}
 	}
@@ -112,10 +109,10 @@ defineCE(
 
 		onClick(ev: McEvent) {
 			const that = this,
-				c = this.Dom.counter++;
+				c = that.Dom.counter++;
 			(ev.data as PointerEvent).stopPropagation();
-			(this.target as HTMLElement).classList.remove('clicked');
-			(this.target as HTMLElement).classList.add(
+			(that.target as HTMLElement).classList.remove('clicked');
+			(that.target as HTMLElement).classList.add(
 				that.Dom.counter > 9 ? 'overClicked' : 'clicked'
 			);
 		}
@@ -130,10 +127,11 @@ let MyTag: CustomElementConstructor = getCE('my-tag')!,
 stress test
 */
 
-let start = new Date().getTime();
+let start = new Date().getTime(),
+	max = 100;
 
-// create 100 elements
-for (let x = 0; x < 1000; x++) {
+// create 1000 elements
+for (let x = 0; x < max; x++) {
 	fragment.append(new MyTag());
 }
 
@@ -152,14 +150,16 @@ setTimeout(() => {
 	// console.clear();
 
 	console.log(
-		'%c \n\nStress Test:\n\n %cInstancing 1000 web components (3000 classes): %c %s ms.',
+		'%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());
+	//document.body.appendChild(new MyTag());
 
 	let element = document.querySelector('my-tag');
 

package/webpack.config.js

@@ -1,15 +1,15 @@
-const path = require("path");
+const path = require('path');
 
 module.exports = [
 	{
-		entry: "./build/MC.js",
-		mode: "production",
+		entry: './build/MC.js',
+		mode: 'production',
 		output: {
-			path: path.resolve(__dirname, "dist"),
-			filename: "MC.min.js",
-			libraryTarget: "umd",
-			library: "MC",
-			globalObject: "this",
+			path: path.resolve(__dirname, 'dist'),
+			filename: 'MC.min.js',
+			libraryTarget: 'umd',
+			library: 'MC',
+			globalObject: 'this',
 		},
 		module: {
 			rules: [
@@ -17,13 +17,13 @@ module.exports = [
 					// test: /\.tsx?$/,
 					use: [
 						{
-							loader: "ts-loader",
+							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
+									outDir: 'build/types', // Output .d.ts and .d.ts.map to a different directory
 								},
 							},
 						},
@@ -33,21 +33,21 @@ module.exports = [
 			],
 		},
 		resolve: {
-			extensions: [".tsx", ".ts", ".js"],
+			extensions: ['.tsx', '.ts', '.js'],
 		},
 		optimization: {
 			minimize: false, // Enable minification
 		},
 	},
 	{
-		entry: "./build/elements.js",
-		mode: "production",
+		entry: './build/elements.js',
+		mode: 'production',
 		output: {
-			path: path.resolve(__dirname, "dist"),
-			filename: "elements.min.js",
-			libraryTarget: "umd",
-			library: "elements",
-			globalObject: "this",
+			path: path.resolve(__dirname, 'dist'),
+			filename: 'elements.min.js',
+			libraryTarget: 'umd',
+			library: 'elements',
+			globalObject: 'this',
 		},
 		module: {
 			rules: [
@@ -55,13 +55,13 @@ module.exports = [
 					// test: /\.tsx?$/,
 					use: [
 						{
-							loader: "ts-loader",
+							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
+									outDir: 'build/types', // Output .d.ts and .d.ts.map to a different directory
 								},
 							},
 						},
@@ -71,21 +71,21 @@ module.exports = [
 			],
 		},
 		resolve: {
-			extensions: [".tsx", ".ts", ".js"],
+			extensions: ['.tsx', '.ts', '.js'],
 		},
 		optimization: {
 			minimize: true, // Enable minification
 		},
 	},
 	{
-		entry: "./build/selectors.js",
-		mode: "production",
+		entry: './build/selectors.js',
+		mode: 'production',
 		output: {
-			path: path.resolve(__dirname, "dist"),
-			filename: "selectors.min.js",
-			libraryTarget: "umd",
-			library: "selectors",
-			globalObject: "this",
+			path: path.resolve(__dirname, 'dist'),
+			filename: 'selectors.min.js',
+			libraryTarget: 'umd',
+			library: 'selectors',
+			globalObject: 'this',
 		},
 		module: {
 			rules: [
@@ -93,13 +93,13 @@ module.exports = [
 					// test: /\.tsx?$/,
 					use: [
 						{
-							loader: "ts-loader",
+							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
+									outDir: 'build/types', // Output .d.ts and .d.ts.map to a different directory
 								},
 							},
 						},
@@ -109,21 +109,21 @@ module.exports = [
 			],
 		},
 		resolve: {
-			extensions: [".tsx", ".ts", ".js"],
+			extensions: ['.tsx', '.ts', '.js'],
 		},
 		optimization: {
 			minimize: true, // Enable minification
 		},
 	},
 	{
-		entry: "./build/formValues.js",
-		mode: "production",
+		entry: './build/formValues.js',
+		mode: 'production',
 		output: {
-			path: path.resolve(__dirname, "dist"),
-			filename: "formvValues.min.js",
-			libraryTarget: "umd",
-			library: "formValues",
-			globalObject: "this",
+			path: path.resolve(__dirname, 'dist'),
+			filename: 'formvValues.min.js',
+			libraryTarget: 'umd',
+			library: 'formValues',
+			globalObject: 'this',
 		},
 		module: {
 			rules: [
@@ -131,13 +131,13 @@ module.exports = [
 					// test: /\.tsx?$/,
 					use: [
 						{
-							loader: "ts-loader",
+							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
+									outDir: 'build/types', // Output .d.ts and .d.ts.map to a different directory
 								},
 							},
 						},
@@ -147,21 +147,21 @@ module.exports = [
 			],
 		},
 		resolve: {
-			extensions: [".tsx", ".ts", ".js"],
+			extensions: ['.tsx', '.ts', '.js'],
 		},
 		optimization: {
 			minimize: true, // Enable minification
 		},
 	},
 	{
-		entry: "./build/observables.js",
-		mode: "production",
+		entry: './build/observables.js',
+		mode: 'production',
 		output: {
-			path: path.resolve(__dirname, "dist"),
-			filename: "observables.min.js",
-			libraryTarget: "umd",
-			library: "observables",
-			globalObject: "this",
+			path: path.resolve(__dirname, 'dist'),
+			filename: 'observables.min.js',
+			libraryTarget: 'umd',
+			library: 'observables',
+			globalObject: 'this',
 		},
 		module: {
 			rules: [
@@ -169,13 +169,13 @@ module.exports = [
 					// test: /\.tsx?$/,
 					use: [
 						{
-							loader: "ts-loader",
+							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
+									outDir: 'build/types', // Output .d.ts and .d.ts.map to a different directory
 								},
 							},
 						},
@@ -185,7 +185,7 @@ module.exports = [
 			],
 		},
 		resolve: {
-			extensions: [".tsx", ".ts", ".js"],
+			extensions: ['.tsx', '.ts', '.js'],
 		},
 		optimization: {
 			minimize: true, // Enable minification
@@ -193,14 +193,14 @@ module.exports = [
 	},
 	// bundle files
 	{
-		entry: "./build/microcomponents.js",
-		mode: "production",
+		entry: './build/microcomponents.js',
+		mode: 'production',
 		output: {
-			path: path.resolve(__dirname, "dist"),
-			filename: "microcomponents.min.js",
-			libraryTarget: "umd",
-			library: "microcomponents",
-			globalObject: "this",
+			path: path.resolve(__dirname, 'dist'),
+			filename: 'microcomponents.min.js',
+			libraryTarget: 'umd',
+			library: 'microcomponents',
+			globalObject: 'this',
 		},
 		module: {
 			rules: [
@@ -208,13 +208,13 @@ module.exports = [
 					// test: /\.tsx?$/,
 					use: [
 						{
-							loader: "ts-loader",
+							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
+									outDir: 'build/types', // Output .d.ts and .d.ts.map to a different directory
 								},
 							},
 						},
@@ -224,7 +224,81 @@ module.exports = [
 			],
 		},
 		resolve: {
-			extensions: [".tsx", ".ts", ".js"],
+			extensions: ['.tsx', '.ts', '.js'],
+		},
+		optimization: {
+			minimize: true, // Enable minification
+		},
+	},
+	{
+		entry: './build/test/Grandparent.js',
+		mode: 'production',
+		output: {
+			path: path.resolve(__dirname, 'public/test'),
+			filename: 'Grandparent.js',
+			libraryTarget: 'umd',
+			library: 'TestGrandparent',
+		},
+		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/test/Testform.js',
+		mode: 'production',
+		output: {
+			path: path.resolve(__dirname, 'public/test'),
+			filename: 'Testform.js',
+			libraryTarget: 'umd',
+			library: 'TestTestform',
+		},
+		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