@cocreate/utils 1.37.3 → 1.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/utils",
-  "version": "1.37.3",
+  "version": "1.39.0",
   "description": "A simple utils component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "utils",
@@ -45,14 +45,10 @@
   },
   "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"

package/src/index.js

@@ -221,6 +221,72 @@
 		}
 	}
 
+	/**
+	 * Flattens a deeply nested object or array into a single-level object
+	 * where keys are dot/bracket notation paths and values are the corresponding
+	 * primitive values (string, number, boolean, null, undefined) from the
+	 * original structure.
+	 *
+	 * @param {object|array} input The object or array to flatten.
+	 * @returns {object} A flat object with dot/bracket notation keys mapped to their primitive values.
+	 */
+	function objectToDotNotation(input) {
+		const results = {}; // Initialize an empty OBJECT to store key-value pairs
+
+		// Helper function for recursion
+		function traverse(currentValue, path) {
+			// Base Case: Primitive values (or null/undefined)
+			// We consider anything that's not an object or is null as a primitive endpoint.
+			if (typeof currentValue !== "object" || currentValue === null) {
+				// Only add if a path exists (handles the edge case where the initial input itself is primitive)
+				if (path !== undefined && path !== null && path !== "") {
+					results[path] = currentValue; // Assign the primitive value to the constructed path key
+				}
+				return; // Stop recursion for this branch
+			}
+
+			// Recursive Step: Array
+			if (Array.isArray(currentValue)) {
+				// Only traverse non-empty arrays if we're looking for primitive values
+				// If you wanted empty arrays represented (e.g., 'notes': []), you'd add logic here.
+				if (currentValue.length > 0) {
+					currentValue.forEach((item, index) => {
+						// Build the next path segment using bracket notation for arrays
+						const nextPath = `${path}[${index}]`;
+						traverse(item, nextPath);
+					});
+				} else if (path) {
+					// Optional: represent empty arrays explicitly if needed
+					// results[path] = []; // Uncomment this line if you want empty arrays included
+				}
+			}
+			// Recursive Step: Object (and not null, not an array)
+			else {
+				const keys = Object.keys(currentValue);
+				// Only traverse non-empty objects if we're looking for primitive values
+				// If you wanted empty objects represented (e.g., 'metadata': {}), you'd add logic here.
+				if (keys.length > 0) {
+					keys.forEach((key) => {
+						// Build the next path segment:
+						// - Use dot notation if the current path is not empty.
+						// - Just use the key if it's the first level.
+						const nextPath = path ? `${path}.${key}` : key;
+						traverse(currentValue[key], nextPath);
+					});
+				} else if (path) {
+					// Optional: represent empty objects explicitly if needed
+					// results[path] = {}; // Uncomment this line if you want empty objects included
+				}
+			}
+		}
+
+		// Start the traversal with the initial input and an empty path
+		// Using an empty string '' ensures the first level keys don't start with '.'
+		traverse(input, "");
+
+		return results; // Return the populated results object
+	}
+
 	function getValueFromObject(object = {}, path = "", throwError = false) {
 		try {
 			if (!Object.keys(object).length || !path) {
@@ -439,6 +505,51 @@
 		}
 	}
 
+	/**
+	 * Converts a JavaScript object into a URL-encoded query string using
+	 * the standard URLSearchParams API (works in Node.js and modern browsers).
+	 * - Uses repeated keys for arrays.
+	 * - Skips null/undefined values.
+	 * - Converts other values to strings.
+	 *
+	 * @param {object | null | undefined} paramsObj The object to convert.
+	 * @returns {string} A URL-encoded query string starting with '?'
+	 * if params exist, otherwise an empty string.
+	 */
+	function objectToSearchParams(paramsObj) {
+		if (
+			!paramsObj ||
+			typeof paramsObj !== "object" ||
+			Array.isArray(paramsObj)
+		) {
+			return "";
+		}
+
+		// Filter out null/undefined values
+		const filteredObj = {};
+		for (const key in paramsObj) {
+			if (Object.hasOwn(paramsObj, key)) {
+				const value = paramsObj[key];
+				if (value !== null && value !== undefined) {
+					filteredObj[key] = value;
+				}
+			}
+		}
+
+		if (Object.keys(filteredObj).length === 0) {
+			return "";
+		}
+
+		// --- CORE LOGIC ---
+		// Create URLSearchParams directly from the filtered object
+		// This works identically in modern Node.js and browsers.
+		const searchParams = new URLSearchParams(filteredObj);
+		const queryString = searchParams.toString();
+		// --- END CORE LOGIC ---
+
+		return queryString ? `?${queryString}` : "";
+	}
+
 	function domParser(str) {
 		try {
 			var mainTag = str.match(/\<(?<tag>[a-z0-9]+)(.*?)?\>/).groups.tag;
@@ -540,157 +651,179 @@
 		return path;
 	}
 
-	function queryElements({ element, prefix, type, selector }) {
-		let elements = new Map();
-		if (!element) element = document;
-		let hasAttribute = false;
-
-		if (selector) {
-			if (!type) type = ["selector"];
-			else if (!Array.isArray(type)) type = [type];
-		} else type = ["selector", "closest", "parent", "next", "previous"];
-
-		for (let i = 0; i < type.length; i++) {
-			let Selector = selector;
-			if (!Selector && element.nodeType !== 9) {
-				let name = prefix + "-" + type[i];
-				if (!element.hasAttribute(name)) continue;
-				hasAttribute = true;
-				Selector = element.getAttribute(name);
+	// Define a list of query types that describe relationships or contexts in the DOM.
+	const queryTypes = [
+		"$closest", // Selects the closest ancestor matching the selector
+		"$parent", // Selects the direct parent element
+		"$next", // Selects the next sibling element
+		"$previous", // Selects the previous sibling element
+		"$document", // Selects the document containing the element
+		"$frame", // Selects the frame or iframe containing the element
+		"$top" // Selects the top-level document or window
+	];
+
+	// Construct a regular expression pattern to match any of the query types.
+	// Each query type begins with a dollar sign, which is escaped in the regex.
+	const regexPatternString = `(?:${queryTypes
+		.map((type) => type.replace("$", "\\$")) // Escape $ character for regex
+		.join("|")})`;
+
+	// Compile the regular expression pattern into a RegExp object.
+	// This regex will be used to find the first occurrence of any query type within a string.
+	const queryTypesRegex = new RegExp(regexPatternString);
+
+	/**
+	 * Function to query DOM elements based on specified criteria.
+	 * @param {Object} params - Object containing parameters for querying elements.
+	 * @param {Element|Document} params.element - The root element or document to start the query from. Defaults to the entire document.
+	 * @param {string} params.prefix - Optional prefix used to construct the query.
+	 * @param {string} params.selector - The CSS selector or query string to use.
+	 * @returns {Array} - An array of elements that match the query.
+	 */
+	function queryElements({ element = document, prefix, selector }) {
+		// Initialize a Set to store unique elements.
+		let elements = new Set();
+
+		// If no selector is provided and the element is an element node.
+		if (!selector && element.nodeType === 1) {
+			// If no prefix is provided, derive one from the element's attributes.
+			if (!prefix) {
+				for (let attr of element.attributes) {
+					// If an attribute with "-query" suffix is found, extract prefix.
+					if (attr.name.endsWith("-query")) {
+						prefix = attr.name.slice(0, -6);
+					}
+				}
+				// If no valid prefix is found, exit the function.
+				if (!prefix) return false;
 			}
+			// Get the selector using the derived prefix.
+			selector = element.getAttribute(prefix + "-" + "query");
+			if (!selector) return false; // Exit if no selector is found.
+		}
 
-			if (Selector) {
-				let selectors = Selector.split(/,(?![^()]*\))/g);
+		// Split complex selectors into individual ones, handling nested structures.
+		let selectors = selector.split(/,(?![^()\[\]]*[)\]])/g);
+		for (let i = 0; i < selectors.length; i++) {
+			if (!selectors[i]) continue; // Skip empty selectors.
 
-				for (let j = 0; j < selectors.length; j++) {
-					if (selectors[j].includes("@")) {
-						selectors[j] = checkMediaQueries(selectors[j]);
-						if (selectors[j] === false) continue;
-					}
+			let queriedElement = element; // Start query from the current element.
 
-					let queriedElement = element;
-					let specialSelectors = selectors[j].split(";");
-					for (let k = 0; k < specialSelectors.length; k++) {
-						// TODO: Support an array of queried elements and branch off to return matches for each
-						// if (!Array.isArray(queriedElement)) {
-						//     queriedElement = [queriedElement]
-						// }
-
-						if (!specialSelectors[k]) continue;
-						if (k === 0) {
-							if (type[i] === "parent")
-								queriedElement = queriedElement.parentElement;
-							else if (type[i] === "next")
-								queriedElement =
-									queriedElement.nextElementSibling;
-							else if (type[i] === "previous")
-								queriedElement =
-									queriedElement.previousElementSibling;
-						} else if (queriedElement.contentDocument) {
-							queriedElement = queriedElement.contentDocument;
-						}
+			// If media queries are included, verify and filter the selector accordingly.
+			if (selectors[i].includes("@")) {
+				selectors[i] = checkMediaQueries(selectors[i]);
+				if (selectors[i] === false) continue; // Skip if media query is not matched.
+			}
 
-						switch (
-							(specialSelectors[k] = specialSelectors[k].trim())
-						) {
-							case "top":
-								queriedElement = window.top.document;
-								break;
-							case "frame":
-								if (queriedElement.nodeType === 9)
-									queriedElement =
-										queriedElement.window.frameElement;
-								else if (queriedElement.contentDocument)
-									queriedElement =
-										queriedElement.contentDocument;
-								break;
-							case "document":
-								queriedElement = document;
-								break;
-							case "parent":
-								queriedElement = queriedElement.parentElement;
-								break;
-							case "next":
-								queriedElement =
-									queriedElement.nextElementSibling;
-								break;
-							case "previous":
-								queriedElement =
-									queriedElement.previousElementSibling;
-								break;
-							default:
-								if (k === 0 && type[i] === "closest")
-									if (specialSelectors[k].includes(" ")) {
-										let [firstSelector, ...restSelectors] =
-											specialSelectors[k].split(/ (.+)/);
-										queriedElement =
-											queriedElement.closest(
-												firstSelector
-											);
-										if (restSelectors.length > 0) {
-											if (restSelectors[0].endsWith("[]"))
-												queriedElement =
-													queriedElement.querySelectorAll(
-														restSelectors[0].slice(
-															0,
-															-2
-														)
-													);
-											else
-												queriedElement =
-													queriedElement.querySelector(
-														restSelectors[0]
-													);
-										}
-									} else {
-										// If no space, just use the selector with closest
-										queriedElement = queriedElement.closest(
-											specialSelectors[k]
-										);
-									}
-								else if (
-									specialSelectors[k] === "$clickedElement"
-								) {
-									queriedElement =
-										queriedElement.clickedElement;
-								} else if (specialSelectors[k].endsWith("[]"))
-									queriedElement =
-										queriedElement.querySelectorAll(
-											specialSelectors[k].slice(0, -2)
-										);
-								else
-									queriedElement =
-										queriedElement.querySelector(
-											specialSelectors[k]
-										);
-						}
-						if (!queriedElement) break;
-					}
+			let remainingSelector = selectors[i].trim(); // Trim any whitespace.
+			let match;
+
+			// Process each part of the selector that corresponds to specific query types/operators.
+			while ((match = queryTypesRegex.exec(remainingSelector)) !== null) {
+				const matchIndex = match.index;
+				const operator = match[0];
+
+				// Process the part before the operator (if any).
+				const part = remainingSelector
+					.substring(0, matchIndex)
+					.trim()
+					.replace(/,$/, "");
+				if (part) {
+					queriedElement = querySelector(queriedElement, part);
+					if (!queriedElement) break; // Exit loop if no element is found.
+				}
 
-					if (
-						Array.isArray(queriedElement) ||
-						queriedElement instanceof HTMLCollection ||
-						queriedElement instanceof NodeList
-					) {
-						for (let el of queriedElement) elements.set(el, "");
-					} else if (queriedElement) {
-						elements.set(queriedElement, "");
+				// Remove the processed part and operator from the remaining selector.
+				remainingSelector = remainingSelector
+					.substring(matchIndex + operator.length)
+					.trim();
+
+				// Handle the $closest operator specifically.
+				if (operator === "$closest") {
+					let [closest, remaining = ""] = remainingSelector.split(
+						/\s+/,
+						2
+					);
+					queriedElement = queriedElement.closest(closest);
+					remainingSelector = remaining.trim();
+				} else {
+					// Process other operators using the queryType function.
+					queriedElement = queryType(queriedElement, operator);
+				}
+
+				if (!queriedElement) break; // Exit loop if no element is found.
+			}
+
+			if (!queriedElement) continue; // Skip if no element is found.
+
+			// Process the remaining part after the last operator (if any).
+			if (remainingSelector) {
+				queriedElement = querySelector(
+					queriedElement,
+					remainingSelector
+				);
+			}
+
+			// Add elements to the set.
+			if (
+				Array.isArray(queriedElement) ||
+				queriedElement instanceof HTMLCollection ||
+				queriedElement instanceof NodeList
+			) {
+				for (let el of queriedElement) {
+					if (el instanceof Element) {
+						elements.add(el);
 					}
 				}
-			} else if (Selector === "") {
-				if (type[i] === "parent")
-					elements.set(element.parentElement, "");
-				else if (type[i] === "next")
-					elements.set(element.nextElementSibling, "");
-				else if (type[i] === "previous")
-					elements.set(element.previousElementSibling, "");
+			} else if (queriedElement instanceof Element) {
+				elements.add(queriedElement);
 			}
 		}
 
-		if (!hasAttribute && !selector) elements = false;
-		else elements = Array.from(elements.keys());
+		return Array.from(elements); // Convert Set to Array and return found elements.
+	}
+
+	function queryType(element, type) {
+		if (!element) return null;
+
+		switch (type) {
+			case "$top":
+				return window.top.document;
+			case "$frame":
+				// If element is a document, return the iframe element containing it
+				if (element.nodeType === 9) return window.frameElement;
+				// If element is an iframe, return it as is
+				return element;
+			case "$document":
+				// If element is a document, return itself, else return `ownerDocument`
+				return element.nodeType === 9 ? element : element.ownerDocument;
+			case "$closest":
+				// If closest find the first selector seperated by space
+
+				return element.nodeType === 9 ? element : element.ownerDocument;
+			case "$parent":
+				// If it's a document, return the parent document (if inside an iframe)
+				if (element.nodeType === 9) {
+					return element.defaultView !== window.top
+						? element.defaultView.parent.document
+						: null;
+				}
+				// Otherwise, return parent element
+				return element.parentElement;
+			case "$next":
+				return element.nextElementSibling;
+			case "$previous":
+				return element.previousElementSibling;
+			default:
+				return null;
+		}
+	}
 
-		return elements;
+	function querySelector(element, selector) {
+		if (!element) return null;
+		return selector.endsWith("[]")
+			? element.querySelectorAll(selector.slice(0, -2))
+			: element.querySelector(selector);
 	}
 
 	const mediaRanges = {
@@ -1119,7 +1252,9 @@
 		checkValue,
 		isValidDate,
 		dotNotationToObject,
+		objectToDotNotation,
 		getValueFromObject,
+		objectToSearchParams,
 		domParser,
 		parseTextToHtml,
 		escapeHtml,

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-utils": "./src/index.js",
-        },
-        output: {
-            path: path.resolve(__dirname, "dist"),
-            filename: isProduction ? "[name].min.js" : "[name].js",
-            libraryTarget: "umd",
-            libraryExport: "default",
-            library: ["CoCreate", "utils"],
-            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-utils": "./src/index.js"
+		},
+		output: {
+			path: path.resolve(__dirname, "dist"),
+			filename: isProduction ? "[name].min.js" : "[name].js",
+			libraryExport: "default",
+			library: ["CoCreate", "utils"],
+			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;
+};