@cocreate/element-prototype 1.28.1 → 1.29.1

package/src/index.js

@@ -20,8 +20,16 @@
 // you must obtain a commercial license from CoCreate LLC.
 // For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
 
-import { getAttribute } from './getAttribute';
-import { setValue } from './setValue';
-import { getValue } from './getValue';
+import { getAttribute } from "./getAttribute";
+import { setValue } from "./setValue";
+import { getValue } from "./getValue";
+import { queryElements } from "./queryElements";
+import { processOperators } from "./operators";
 
-export default { getAttribute, getValue, setValue }
+export default {
+	getAttribute,
+	getValue,
+	setValue,
+	processOperators,
+	queryElements
+};

package/src/operators.js

@@ -0,0 +1,255 @@
+import { ObjectId, queryElements } from "@cocreate/utils";
+
+// Operators handled directly for simple, synchronous value retrieval
+const customOperators = new Map(
+	Object.entries({
+		$organization_id: () => localStorage.getItem("organization_id"),
+		$user_id: () => localStorage.getItem("user_id"),
+		$clientId: () => localStorage.getItem("clientId"),
+		$session_id: () => localStorage.getItem("session_id"),
+		$value: (element) => element.getValue() || "",
+		$innerWidth: () => window.innerWidth,
+		$innerHeight: () => window.innerHeight,
+		$href: () => window.location.href.replace(/\/$/, ""),
+		$origin: () => window.location.origin,
+		$protocol: () => window.location.protocol,
+		$hostname: () => window.location.hostname,
+		$host: () => window.location.host,
+		$port: () => window.location.port,
+		$pathname: () => window.location.pathname.replace(/\/$/, ""),
+		$hash: () => window.location.hash,
+		$subdomain: () => getSubdomain() || "",
+		$object_id: () => ObjectId().toString(),
+		"ObjectId()": () => ObjectId().toString(),
+		$relativePath: () => {
+			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: () => {
+			let path = window.location.pathname;
+			if (path.split("/").pop().includes(".")) {
+				path = path.replace(/\/[^\/]+$/, "/");
+			}
+			return path === "/" ? "" : path;
+		},
+		$param: (element, args) => args,
+		$setValue: (element, args) => element.setValue(...args) || ""
+	})
+);
+
+// Operators that access a specific property of a target element
+const propertyOperators = new Set([
+	"$scrollWidth",
+	"$scrollHeight",
+	"$offsetWidth",
+	"$offsetHeight",
+	"$id",
+	"$tagName",
+	"$className",
+	"$textContent",
+	"$innerHTML",
+	"$getValue"
+]);
+
+// Combine all known operator keys for the main parsing regex
+const knownOperatorKeys = [
+	...customOperators.keys(),
+	...propertyOperators
+].sort((a, b) => b.length - a.length);
+
+function escapeRegexKey(key) {
+	if (key.startsWith("$")) {
+		return "\\" + key; // Escape the leading $
+	} else if (key === "ObjectId()") {
+		return "ObjectId\\(\\)"; // Escape the parentheses
+	}
+	return key; // Should not happen with current keys, but fallback
+}
+
+const operatorPattern = knownOperatorKeys.map(escapeRegexKey).join("|");
+
+// Regex to find potential operators and their arguments
+// $1: Potential operator identifier (e.g., $user_id, $closestDiv)
+// $2: Arguments within parentheses (optional)
+const regex = new RegExp(`(${operatorPattern})(?:\\s*\\((.*?)\\))?`, "g");
+
+/**
+ * Synchronously processes a string, finding and replacing operators recursively.
+ * Assumes ALL underlying operations (getValue, queryElements) are synchronous.
+ * @param {Element | null} element - Context element.
+ * @param {string} value - String containing operators.
+ * @param {string[]} [exclude=[]] - Operator prefixes to ignore.
+ * @returns {string} - Processed string.
+ */
+function processOperators(element, value, exclude = [], parent) {
+	// Early exit if no operators are possible or value is not a string
+	if (typeof value !== "string" || !value.includes("$")) {
+		return value;
+	}
+	let params = [];
+	const processedValue = value.replace(
+		regex,
+		(match, operator, args = "") => {
+			// 'match' is the full matched string (e.g., "$closest(.myClass)")
+			// 'operator' is the identifier part (e.g., "$closest")
+			// 'args' is the content within parentheses (e.g., ".myClass") or "" if no parentheses
+
+			if (operator === "$param" && !args) {
+				return match;
+			}
+
+			// If a valid operator was identified AND it's not in the exclude list
+			if (operator && !exclude.includes(operator)) {
+				// Resolve the value for the identified operator and its arguments
+				// Pass the *trimmed* arguments to the resolver
+				let resolvedValue = resolveOperator(
+					element,
+					operator,
+					args.replace(/^['"]|['"]$/g, "").trim(),
+					parent
+				);
+
+				if (operator === "$param") {
+					params.push(resolvedValue);
+					return "";
+				}
+
+				return resolvedValue ?? "";
+			} else {
+				// If no known operator matched, or if it was excluded,
+				// return the original matched string (no replacement).
+				return match;
+			}
+		}
+	);
+
+	if (params.length) {
+		return params;
+	}
+
+	return processedValue;
+}
+
+/**
+/**
+ * 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, // 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 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;
+}
+
+export { processOperators };

package/src/queryElements.js

@@ -0,0 +1,18 @@
+import utils from "@cocreate/utils";
+
+/**
+ * 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

@@ -19,11 +19,26 @@ const setValue = (el, value, dispatch) => {
 	else if (typeof value === "object") value = JSON.stringify(value, null, 2);
 
 	if (["time", "datetime", "datetime-local"].includes(el.type)) {
-		if (el.value) {
-			value = new Date(el.value).toLocalString();
+		if (value) {
+			const date = new Date(value);
+			if (el.type === "time") {
+				// Format time as "HH:MM"
+				const hours = String(date.getHours()).padStart(2, "0");
+				const minutes = String(date.getMinutes()).padStart(2, "0");
+				el.value = `${hours}:${minutes}`;
+			} else if (el.type === "datetime-local") {
+				// Format datetime-local as "YYYY-MM-DDTHH:MM"
+				const year = date.getFullYear();
+				const month = String(date.getMonth() + 1).padStart(2, "0");
+				const day = String(date.getDate()).padStart(2, "0");
+				const hours = String(date.getHours()).padStart(2, "0");
+				const minutes = String(date.getMinutes()).padStart(2, "0");
+				el.value = `${year}-${month}-${day}T${hours}:${minutes}`;
+			}
 		} else {
-			value = "";
+			el.value = "";
 		}
+		return dispatchEvents(el, bubbles, dispatch);
 	}
 
 	let valueType = el.getAttribute("value-type");
@@ -100,6 +115,8 @@ const setValue = (el, value, dispatch) => {
 		el.srcdoc = value;
 	} else if (el.tagName === "SCRIPT") {
 		setScript(el, value);
+	} else if (el.hasAttribute("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;
+};

package/src/utility.js

@@ -1,80 +0,0 @@
-import { ObjectId } from "@cocreate/utils";
-
-function getSubdomain() {
-	const hostname = window.location.hostname; // e.g., "api.dev.example.com"
-	const parts = hostname.split(".");
-
-	// Handle edge cases for single-word hostnames or IPs
-	if (parts.length > 2 && isNaN(parts[parts.length - 1])) {
-		return parts.slice(0, parts.length - 2).join("."); // Subdomain
-	}
-
-	return null; // No subdomain
-}
-
-const operatorsMap = {
-	$href: function () {
-		return window.location.href;
-	},
-	$origin: function () {
-		return window.location.origin;
-	},
-	$protocol: function () {
-		return window.location.protocol;
-	},
-	$host: function () {
-		return window.location.host;
-	},
-	$hostname: function () {
-		return window.location.hostname;
-	},
-	$port: function () {
-		return window.location.port;
-	},
-	$pathname: function () {
-		return window.location.pathname;
-	},
-	$hash: function () {
-		return window.location.hash;
-	},
-	$subdomain: function () {
-		return getSubdomain() || "";
-	},
-	$object_id: function () {
-		return ObjectId().toString();
-	}
-};
-
-function urlOperators(value) {
-	if (typeof value !== "string") {
-		console.error("Value is not a string:", value);
-		return value; // Return as-is for non-string input
-	}
-
-	// Dynamically construct a regex from the keys in operatorsMap
-	const operatorKeys = Object.keys(operatorsMap)
-		.map((key) => `\\${key}`)
-		.join("|");
-	const regex = new RegExp(operatorKeys, "g");
-
-	// Debugging regex match
-	// if (!regex.test(value)) {
-	// 	console.warn("Regex did not match any part of the input value.");
-	// }
-
-	// Replace matched operators with their resolved values
-	const updatedValue = value.replace(regex, function (match) {
-		if (operatorsMap[match]) {
-			const replacement = operatorsMap[match]();
-			console.log(`Replacing "${match}" with "${replacement}"`);
-			return replacement || "";
-		} else {
-			console.warn(`No match found for "${match}" in operatorsMap.`);
-			return ""; // Default replacement if operator not found
-		}
-	});
-
-	return updatedValue;
-}
-
-export default { urlOperators };