@cocreate/utils 1.38.0 → 1.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/utils",
-  "version": "1.38.0",
+  "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,196 +651,168 @@
 		return path;
 	}
 
+	// Define a list of query types that describe relationships or contexts in the DOM.
 	const queryTypes = [
-		"selector",
-		"closest",
-		"parent",
-		"next",
-		"previous",
-		"document",
-		"frame",
-		"top"
+		"$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
 	];
 
-	const queryTypesRegex = new RegExp(`\\$(?:${queryTypes.join("|")})\\b`); // Find the *first* match
+	// 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("|")})`;
 
-	function queryElements({ element = document, prefix, type, selector }) {
-		let elements = new Set();
+	// 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);
 
-		let hasAttribute = false;
+	/**
+	 * 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 (!selector) {
-			if (!prefix && element.nodeType === 1) {
+		// 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) {
-					let parts = attr.name.split("-");
-					if (parts.length < 2) continue;
-
-					let possibleType = parts.pop();
-					if (queryTypes.includes(possibleType)) {
-						type = [possibleType];
-						prefix = parts.join("-");
-						break;
+					// 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;
-			} else if (!type && element.nodeType === 1) {
-				for (let i = 0; i < queryTypes.length; i++) {
-					if (element.hasAttribute(`${prefix}-${queryTypes[i]}`)) {
-						type = [queryTypes[i]];
-					}
-				}
 			}
+			// Get the selector using the derived prefix.
+			selector = element.getAttribute(prefix + "-" + "query");
+			if (!selector) return false; // Exit if no selector is found.
 		}
 
-		if (!type) type = selector ? ["selector"] : queryTypes;
+		// 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.
 
-		if (!Array.isArray(type)) type = [type];
+			let queriedElement = element; // Start query from the current element.
 
-		for (let i = 0; i < type.length; i++) {
-			if (!selector && element.nodeType !== 9) {
-				let name = prefix + "-" + type[i];
-				if (!element.hasAttribute(name)) continue;
-				hasAttribute = true;
-				selector = element.getAttribute(name);
-				type = [type[i]];
+			// 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.
 			}
 
-			let mainElement = element;
-			if (
-				[
-					"parent",
-					"next",
-					"previous",
-					"document",
-					"frame",
-					"top"
-				].includes(type[i])
-			) {
-				mainElement = queryType(mainElement, type[i]);
-			}
-
-			if (!selector) {
-				elements.add(mainElement);
-			} else {
-				let selectors = selector.split(/,(?![^()]*\))/g);
-
-				for (let j = 0; j < selectors.length; j++) {
-					if (!selectors[j]) continue;
-
-					let queriedElement = mainElement;
-
-					if (selectors[j].includes("@")) {
-						selectors[j] = checkMediaQueries(selectors[j]);
-						if (selectors[j] === false) continue;
-					}
-
-					if (type[i] === "closest") {
-						let [closestSelector, remainingSelector = ""] =
-							selectors[j].split(/\s+/, 2);
-						queriedElement =
-							queriedElement.closest(closestSelector);
+			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 (!queriedElement) continue;
+				// Remove the processed part and operator from the remaining selector.
+				remainingSelector = remainingSelector
+					.substring(matchIndex + operator.length)
+					.trim();
 
-						selectors[j] = remainingSelector;
-					}
-
-					let remainingSelector = selectors[j].trim();
-					let match;
+				// 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);
+				}
 
-					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;
-						}
+				if (!queriedElement) break; // Exit loop if no element is found.
+			}
 
-						// Process the operator
-						queriedElement = queryType(
-							queriedElement,
-							operator.substring(1)
-						);
-						if (!queriedElement) break;
-
-						// Remove the processed part and operator from the remaining selector
-						remainingSelector = remainingSelector
-							.substring(matchIndex + operator.length)
-							.trim();
-					}
+			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.trim().replace(/,$/, "")
-						);
-					}
+			// Process the remaining part after the last operator (if any).
+			if (remainingSelector) {
+				queriedElement = querySelector(
+					queriedElement,
+					remainingSelector
+				);
+			}
 
-					if (
-						Array.isArray(queriedElement) ||
-						queriedElement instanceof HTMLCollection ||
-						queriedElement instanceof NodeList
-					) {
-						for (let el of queriedElement) {
-							if (el instanceof Element) {
-								elements.add(el);
-							}
-						}
-					} else if (queriedElement instanceof Element) {
-						elements.add(queriedElement);
+			// 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 (queriedElement instanceof Element) {
+				elements.add(queriedElement);
 			}
 		}
 
-		if (!hasAttribute && !selector) {
-			elements = false;
-		} else {
-			elements = Array.from(elements);
-		}
-
-		return elements;
+		return Array.from(elements); // Convert Set to Array and return found elements.
 	}
 
 	function queryType(element, type) {
 		if (!element) return null;
 
 		switch (type) {
-			case "top":
+			case "$top":
 				return window.top.document;
-			case "frame":
-				// ✅ If element is a document, return the iframe element containing it
+			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
+				// If element is an iframe, return it as is
 				return element;
-			case "document":
-				// ✅ If element is a document, return itself, else return `ownerDocument`
+			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)
+			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
+				// Otherwise, return parent element
 				return element.parentElement;
-			case "next":
+			case "$next":
 				return element.nextElementSibling;
-			case "previous":
+			case "$previous":
 				return element.previousElementSibling;
 			default:
 				return null;
@@ -1169,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;
+};