@cocreate/element-prototype 1.29.0 → 1.29.1

package/src/index.js

@@ -24,7 +24,7 @@ import { getAttribute } from "./getAttribute";
 import { setValue } from "./setValue";
 import { getValue } from "./getValue";
 import { queryElements } from "./queryElements";
-import { processOperators } from "./utility";
+import { processOperators } from "./operators";
 
 export default {
 	getAttribute,

package/src/{utility.js → operators.js}

@@ -22,7 +22,8 @@ const customOperators = new Map(
 		$object_id: () => ObjectId().toString(),
 		"ObjectId()": () => ObjectId().toString(),
 		$relativePath: () => {
-			let depth = window.location.pathname.split("/").length - 1;
+			let currentPath = window.location.pathname.replace(/\/[^\/]*$/, ""); // Remove file or last segment from path
+			let depth = currentPath.split("/").filter(Boolean).length; // Count actual directory levels
 			return depth > 0 ? "../".repeat(depth) : "./";
 		},
 		$path: () => {
@@ -131,69 +132,123 @@ function processOperators(element, value, exclude = [], parent) {
 }
 
 /**
- * Synchronously determines and executes the action for a single operator token.
- * @returns {string} The final string value for the token.
+/**
+ * Synchronously determines and executes the action for processing a single operator token.
+ * @param {HTMLElement|null} element - The context element from which to derive values or execute methods.
+ * @param {string} operator - The operator to apply, indicating what actions or property/method to evaluate.
+ * @param {string|Array} args - Arguments that may be used by the operator, which could be further processed if they contain a nested operator.
+ * @param {string} parent - Context in which the function is called, potentially affecting behavior or processing.
+ * @returns {string} The final resolved value after applying the operator to the given elements.
  */
 function resolveOperator(element, operator, args, parent) {
+	// If args contain any operators (indicated by '$'), process them recursively
 	if (args && args.includes("$")) {
+		// Reprocess args to resolve any nested operators
 		args = processOperators(element, args, "", operator);
 	}
 
+	// Initialize an array of elements to operate on, starting with the single element reference if provided
 	let targetElements = element ? [element] : [];
+
+	// If args are provided as a string, treat it as a selector to find applicable target elements
 	if (args && typeof args === "string") {
 		targetElements = queryElements({
-			element,
-			args
+			element, // Use the context element as the base for querying
+			selector: args // Selector from args to find matching elements
 		});
+
+		// If no elements are found matching the selector in args, return args unmodified
+		if (!targetElements.length) return args;
 	}
 
+	// Generate a processed value by applying the operator to each of the target elements
 	let value = processValues(targetElements, operator, args, parent);
+
+	// If the result is a string and still contains unresolved operators, process them further
 	if (value && typeof value === "string" && value.includes("$")) {
+		// Resolve any remaining operators within the value string
 		value = processOperators(element, value, parent);
 	}
 
+	// Return the final processed value, fully resolved
 	return value;
 }
 
 /**
- * Synchronously aggregates values.
- * @returns {string} The aggregated string value.
+ * Synchronously processes and aggregates values from a set of elements based on a specified operator.
+ * @param {Array<HTMLElement>} elements - Array of elements to be processed.
+ * @param {string} operator - The operator to apply to each element, indicating which property or method to use.
+ * @param {string|Array} args - Arguments that may be passed to the method if the operator corresponds to a function.
+ * @param {string} parent - Context in which the function is called, possibly influencing behavior (e.g., special handling for "$param").
+ * @returns {string} The combined string value obtained by processing elements with the specified operator.
  */
 function processValues(elements, operator, args, parent) {
+	// Attempt to fetch a custom operator function associated with the operator
 	let customOp = customOperators.get(operator);
+
+	// Initialize an empty string to accumulate results from processing each element
 	let aggregatedString = "";
+
+	// Iterate over each element in the provided elements array
 	for (const el of elements) {
+		// If the element is null or undefined, skip to the next iteration
 		if (!el) continue;
+
+		// Determine the raw value from the custom operator or by accessing a property/method directly on the element
 		let rawValue = customOp || el?.[operator.substring(1)];
+
+		// Check if the rawValue is a function and process it using provided arguments
 		if (typeof rawValue === "function") {
+			// If arguments are provided as an array
 			if (Array.isArray(args)) {
+				// If there are arguments, exit by returning an empty string (assumes args should not be used here)
 				if (args.length) {
 					return "";
 				}
+				// Invoke the function using the element and spread array arguments
 				rawValue = rawValue(el, ...args);
 			} else {
+				// Otherwise, invoke the function using the element and direct arguments
 				rawValue = rawValue(el, args);
 			}
 		}
 
+		// If the parent context requires parameter resolution
 		if (parent === "$param") {
+			// Return the first evaluated rawValue that is not null or undefined
 			if (rawValue) {
 				return rawValue;
 			}
 		} else {
+			// Otherwise, append the stringified rawValue to the aggregated result, defaulting to an empty string if it's nullish
 			aggregatedString += String(rawValue ?? "");
 		}
 	}
 
+	// Return the final aggregated string containing all processed values
 	return aggregatedString;
 }
 
+/**
+ * Extracts the subdomain from the current window's hostname.
+ * @returns {string|null} - The subdomain part of the hostname if it exists, or null if there is none.
+ */
 function getSubdomain() {
+	// Retrieve the hostname from the current window's location
 	const hostname = window.location.hostname;
+
+	// Split the hostname into parts divided by dots ('.')
 	const parts = hostname.split(".");
+
+	// Check if the hostname has more than two parts and ensure the last part isn't a number (a common TLD check)
+	// A typical domain structure might look like "sub.domain.com",
+	// where "sub" is the subdomain, "domain" is the second-level domain, and "com" is the top-level domain.
 	if (parts.length > 2 && isNaN(parseInt(parts[parts.length - 1]))) {
+		// Join all parts except the last two (which are assumed to be the domain and TLD) to get the subdomain
 		return parts.slice(0, parts.length - 2).join(".");
 	}
+
+	// Return null if there's no valid subdomain structure
 	return null;
 }
 

package/src/queryElements.js

@@ -1,5 +1,18 @@
 import utils from "@cocreate/utils";
 
-Element.prototype.queryElements = function (options = {}) {
+/**
+ * Custom method to query elements in the context of a specific DOM element.
+ *
+ * @param {Object} options - Options to customize the query.
+ * @returns {NodeListOf<Element>} - A list of elements found based on the query criteria.
+ */
+function queryElements(options = {}) {
+	// Use `this` as the element context and pass additional options to utils.queryElements
 	return utils.queryElements({ element: this, ...options });
-};
+}
+
+// Attach the method to Element's prototype to allow its use as an instance method
+Element.prototype.queryElements = queryElements;
+
+// Export the function for direct use in other parts of your application
+export { queryElements };

package/src/setValue.js

@@ -116,7 +116,7 @@ const setValue = (el, value, dispatch) => {
 	} else if (el.tagName === "SCRIPT") {
 		setScript(el, value);
 	} else if (el.hasAttribute("value")) {
-		value = el.setAttribute("value", value);
+		el.setAttribute("value", value);
 	} else {
 		if (el.hasAttribute("contenteditable") && el == document.activeElement)
 			return;

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