@cocreate/events 1.27.0 → 1.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/events",
-  "version": "1.27.0",
+  "version": "1.27.1",
   "description": "A simple events component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "events",
@@ -45,22 +45,18 @@
   },
   "main": "./src/index.js",
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "babel-loader": "^8.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "file-loader": "^6.2.0",
+    "css-loader": "^5.1.3",
+    "esbuild": "^0.25.2",
+    "esbuild-loader": "^4.3.0",
     "mini-css-extract-plugin": "^1.5.0",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.1.1",
     "webpack": "^5.24.4",
     "webpack-cli": "^4.5.0",
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/actions": "^1.18.2",
-    "@cocreate/element-prototype": "^1.23.0",
-    "@cocreate/observer": "^1.16.1",
-    "@cocreate/utils": "^1.33.7"
+    "@cocreate/actions": "^1.21.0",
+    "@cocreate/element-prototype": "^1.29.0",
+    "@cocreate/observer": "^1.18.0",
+    "@cocreate/utils": "^1.38.0"
   }
 }

package/src/index.js

@@ -89,7 +89,7 @@ const CoCreateEvents = {
 			}
 		});
 
-		let selector = `[${prefix}], [${prefix}-key], [${prefix}-attribute], [${prefix}-value], [${prefix}-action], [${prefix}-selector], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous], [${prefix}-preventDefault], [${prefix}-stopPropagation], [${prefix}-stopImmediatePropagation]`;
+		let selector = `[${prefix}], [${prefix}-key], [${prefix}-attribute], [${prefix}-value], [${prefix}-action], [${prefix}-query], [${prefix}-preventDefault], [${prefix}-stopPropagation], [${prefix}-stopImmediatePropagation]`;
 
 		observer.init({
 			name: "CoCreateEventattributes",
@@ -97,11 +97,7 @@ const CoCreateEvents = {
 			attributeFilter: [
 				`${prefix}-key`,
 				`${prefix}-value`,
-				`${prefix}-selector`,
-				`${prefix}-closest`,
-				`${prefix}-parent`,
-				`${prefix}-next`,
-				`${prefix}-previous`,
+				`${prefix}-query`,
 				`${prefix}-events`,
 				`${prefix}-bubbles`,
 				`${prefix}-cancelable`,
@@ -174,15 +170,7 @@ const CoCreateEvents = {
 					if (attribute.name === "observe-target") {
 						target = attribute.value;
 						break;
-					} else if (
-						[
-							`${prefix}-selector`,
-							`${prefix}-closest`,
-							`${prefix}-parent`,
-							`${prefix}-next`,
-							`${prefix}-previous`
-						].includes(attribute.name)
-					) {
+					} else if ([`${prefix}-query`].includes(attribute.name)) {
 						target = attribute.value;
 						break;
 					}
@@ -371,7 +359,7 @@ const CoCreateEvents = {
 						prefixes[prefix].events
 					);
 
-					// let selector = `[${prefix}], [${prefix}-key], [${prefix}-value], [${prefix}-selector], [${prefix}-closest], [${prefix}-parent], [${prefix}-next], [${prefix}-previous]`
+					// let selector = `[${prefix}], [${prefix}-key], [${prefix}-value], [${prefix}-query]`
 
 					// let parentElement = target.parentElement;
 					// if (parentElement) {
@@ -473,7 +461,9 @@ const CoCreateEvents = {
 					values = localStorage.getItem(key);
 				} else if ((key = element.getAttribute("localstorage-set"))) {
 					values = await element.getValue();
-					if (values) localStorage.setItem(key, values);
+					if (values) {
+						localStorage.setItem(key, values);
+					}
 				}
 
 				// if (!key || !values)
@@ -486,29 +476,41 @@ const CoCreateEvents = {
 						element,
 						prefix: `${prefix}-value`
 					});
-					if (valueElements) {
+					if (valueElements.length) {
 						let elementValues = [];
-						for (let i = 0; i < valueElements.length; i++)
+						for (let i = 0; i < valueElements.length; i++) {
 							elementValues.push(valueElements[i].getValue());
-
-						if (elementValues.length) values = elementValues;
+						}
+						if (elementValues.length) {
+							values = elementValues;
+						}
 					}
 				}
 
-				if (values === null)
+				if (values === null) {
 					values = element.getAttribute(`${prefix}-if-value`);
-				if (values === null) values = element.getAttribute(prefix);
+				}
+				if (values === null) {
+					values = element.getAttribute(prefix);
+				}
 			}
 
 			if (values || values === "") {
-				if (typeof values === "string") values = values.split(",");
-				else if (!Array.isArray(values)) values = [values];
+				if (typeof values === "string") {
+					values = values.split(",");
+				} else if (!Array.isArray(values)) {
+					values = [values];
+				}
 			} else {
 				values = await element.getValue();
-				if (!Array.isArray(values)) values = [values];
+				if (!Array.isArray(values)) {
+					values = [values];
+				}
 			}
 
-			if ((targetAttribute && !values) || values.length === 0) return;
+			if ((targetAttribute && !values) || values.length === 0) {
+				return;
+			}
 
 			let ifCondition = element.getAttribute(`${prefix}-if`);
 			let elseCondition = element.getAttribute(`${prefix}-else`);
@@ -518,29 +520,51 @@ const CoCreateEvents = {
 				if (!ifValue && ifValue !== "")
 					ifValue = (await element.getValue()) || values;
 				//values // await element.getValue()
-				else if (ifValue || ifValue === "") ifValue = [ifValue];
-				else ifValue = values;
+				else if (ifValue || ifValue === "") {
+					ifValue = [ifValue];
+				} else {
+					ifValue = values;
+				}
 
-				if (!Array.isArray(ifValue)) ifValue = [ifValue];
+				if (!Array.isArray(ifValue)) {
+					ifValue = [ifValue];
+				}
 			}
 
 			//TODO: improved resize toggling of values
 			// let hasCondition = this.elements2.get(element)
-			if (ifCondition && evaluateCondition(ifCondition, ifValue)) {
-				// if (hasCondition && hasCondition.condition === ifCondition) {
-				//     return
-				// } else
-				//     this.elements2.set(element, { condition: ifCondition })
-			} else if (
-				elseCondition &&
-				evaluateCondition(elseCondition, ifValue)
-			) {
-				// if (hasCondition && hasCondition.condition === elseCondition) {
-				//     return
-				// } else
-				//     this.elements2.set(element, { condition: elseCondition })
-			} else if (ifCondition || elseCondition) {
-				return;
+			if (ifCondition) {
+				if (evaluateCondition(ifCondition, ifValue)) {
+					// Action 1: Condition exists and evaluates true
+					// console.log("Executing Action 1 for ifCondition:", ifCondition); // Optional debug log
+					// Replace this comment with your actual code for Path 1
+					// e.g., this.elements2.set(element, { condition: ifCondition });
+
+					// Assuming we stop processing for this element once a condition is met and actioned
+					return;
+				} else {
+					// Condition existed but evaluated false. Stop processing.
+					// Corresponds to the original `else if (ifCondition || elseCondition) { return; }` for the ifCondition case
+					return;
+				}
+			}
+
+			// If we reach here, ifCondition was falsy (didn't exist)
+			// Now check the 'else' condition
+			if (elseCondition) {
+				if (evaluateCondition(elseCondition, ifValue)) {
+					// Action 2: Condition exists and evaluates true
+					// console.log("Executing Action 2 for elseCondition:", elseCondition); // Optional debug log
+					// Replace this comment with your actual code for Path 2
+					// e.g., this.elements2.set(element, { condition: elseCondition });
+
+					// Assuming we stop processing for this element once a condition is met and actioned
+					return;
+				} else {
+					// Condition existed but evaluated false. Stop processing.
+					// Corresponds to the original `else if (ifCondition || elseCondition) { return; }` for the elseCondition case
+					return;
+				}
 			}
 
 			let targetText = element.getAttribute(`${prefix}-text`);
@@ -548,12 +572,17 @@ const CoCreateEvents = {
 			let targetKey = element.getAttribute(`${prefix}-key`);
 
 			if (prefix === "selected") {
-				if (el !== element) element.removeAttribute("selected");
-				else element.setAttribute("selected", "");
+				if (el !== element) {
+					element.removeAttribute("selected");
+				} else {
+					element.setAttribute("selected", "");
+				}
 			}
 
 			let deactivate = false;
-			if (el !== element) deactivate = true;
+			if (el !== element) {
+				deactivate = true;
+			}
 			// values = values.map(x => x.trim());
 
 			values = values.map((x) => {
@@ -564,14 +593,14 @@ const CoCreateEvents = {
 				}
 				return x; // Return the updated x
 			});
-
-			let targetElements = queryElements({
-				element,
-				prefix,
-				selector: params
-			});
-
-			if (targetElements === false) {
+			let targetElements;
+			if (element.hasAttribute(`${prefix}-query`)) {
+				targetElements = queryElements({
+					element,
+					prefix,
+					selector: params
+				});
+			} else {
 				targetElements = [element];
 			}
 
@@ -1080,7 +1109,7 @@ async function handleElementProcessingWithBackoff(element) {
 		if (element.hasAttribute("onload-attribute")) {
 			/* ... */
 		}
-		if (element.hasAttribute("onload-next")) {
+		if (element.hasAttribute("onload-query")) {
 			/* ... */
 		}
 	} else {

package/webpack.config.js

@@ -1,90 +1,65 @@
-const path = require("path")
-const TerserPlugin = require("terser-webpack-plugin")
-const MiniCssExtractPlugin = require("mini-css-extract-plugin")
-const { CleanWebpackPlugin } = require("clean-webpack-plugin")
-
-module.exports = (env, argv) => {
-    let isProduction = false
-    if (argv.mode === 'production')
-        isProduction = true
-
-    const config = {
-        entry: {
-            "CoCreate-events": "./src/index.js",
-        },
-        output: {
-            path: path.resolve(__dirname, "dist"),
-            filename: isProduction ? "[name].min.js" : "[name].js",
-            libraryTarget: "umd",
-            libraryExport: "default",
-            library: ["CoCreate", "events"],
-            globalObject: "this",
-        },
-
-        plugins: [
-            new CleanWebpackPlugin(),
-            new MiniCssExtractPlugin({
-                filename: "[name].css",
-            }),
-        ],
-        // Default mode for Webpack is production.
-        // Depending on mode Webpack will apply different things
-        // on final bundle. For now we don't need production's JavaScript
-        // minifying and other thing so let's set mode to development
-        mode: isProduction ? "production" : "development",
-        module: {
-            rules: [
-                {
-                    test: /.js$/,
-                    exclude: /(node_modules)/,
-                    use: {
-                        loader: "babel-loader",
-                        options: {
-                            plugins: ["@babel/plugin-transform-modules-commonjs"],
-                        },
-                    },
-                },
-                {
-                    test: /.css$/i,
-                    use: [
-                        { loader: "style-loader", options: { injectType: "linkTag" } },
-                        "file-loader",
-                    ],
-                },
-            ],
-        },
-
-        // add source map
-        ...(isProduction ? {} : { devtool: "eval-source-map" }),
-
-        optimization: {
-            minimize: true,
-            minimizer: [
-                new TerserPlugin({
-                    extractComments: true,
-                    // cache: true,
-                    parallel: true,
-                    // sourceMap: true, // Must be set to true if using source-maps in production
-                    terserOptions: {
-                        // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
-                        // extractComments: 'all',
-                        compress: {
-                            drop_console: true,
-                        },
-                    },
-                }),
-            ],
-            splitChunks: {
-                chunks: "all",
-                minSize: 200,
-                // maxSize: 99999,
-                //minChunks: 1,
-
-                cacheGroups: {
-                    defaultVendors: false,
-                },
-            },
-        },
-    }
-    return config
-}
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { EsbuildPlugin } = require("esbuild-loader");
+const { FileUploader } = require("@cocreate/webpack");
+
+module.exports = async (env, argv) => {
+	const isProduction = argv && argv.mode === "production";
+	const config = {
+		entry: {
+			"CoCreate-events": "./src/index.js"
+		},
+		output: {
+			path: path.resolve(__dirname, "dist"),
+			filename: isProduction ? "[name].min.js" : "[name].js",
+			libraryExport: "default",
+			library: ["CoCreate", "events"],
+			clean: true
+		},
+		plugins: [
+			new MiniCssExtractPlugin({
+				filename: isProduction ? "[name].min.css" : "[name].css"
+			}),
+			new FileUploader(env, argv)
+		],
+		mode: isProduction ? "production" : "development",
+		devtool: isProduction ? "source-map" : "eval-source-map",
+		module: {
+			rules: [
+				{
+					test: /.js$/,
+					exclude: /node_modules/,
+					use: {
+						loader: "esbuild-loader",
+						options: {
+							loader: "js",
+							target: "es2017"
+						}
+					}
+				},
+				{
+					test: /.css$/i,
+					use: [MiniCssExtractPlugin.loader, "css-loader"]
+				}
+			]
+		},
+		optimization: {
+			minimize: isProduction,
+			minimizer: [
+				new EsbuildPlugin({
+					target: "es2017",
+					css: true
+				})
+			],
+			splitChunks: {
+				cacheGroups: {
+					defaultVendors: false
+				}
+			}
+		},
+		performance: {
+			hints: isProduction ? "warning" : false
+		}
+	};
+	return config;
+};