@cocreate/calculate 1.16.0 → 1.16.2

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [1.16.2](https://github.com/CoCreate-app/CoCreate-calculate/compare/v1.16.1...v1.16.2) (2025-05-01)
+
+
+### Bug Fixes
+
+* update [@cocreate](https://github.com/cocreate) dependencies ([2e64a5a](https://github.com/CoCreate-app/CoCreate-calculate/commit/2e64a5a94f95a223e398a8a8cb92e1a2ce647ece))
+
+## [1.16.1](https://github.com/CoCreate-app/CoCreate-calculate/compare/v1.16.0...v1.16.1) (2025-04-30)
+
+
+### Bug Fixes
+
+* added comments ([7ef054f](https://github.com/CoCreate-app/CoCreate-calculate/commit/7ef054f95558036f5d62b00676bf99a58fb425c4))
+* added css-loader ([4649096](https://github.com/CoCreate-app/CoCreate-calculate/commit/46490965d3738e685afd41c44bc78e1e34fe1968))
+* getAttribute ([2a79157](https://github.com/CoCreate-app/CoCreate-calculate/commit/2a7915740101e34923c499c9ebaac29e6b91c9fa))
+* unified observer array of object ([8a525fa](https://github.com/CoCreate-app/CoCreate-calculate/commit/8a525fa0e0ab7a02b77783b2f0fae6a04851ef70))
+* update query attributes ([38a77ff](https://github.com/CoCreate-app/CoCreate-calculate/commit/38a77ffb054b479f5ac926152e32980337ddbfe8))
+* updated cocreate modules versions ([bf2795b](https://github.com/CoCreate-app/CoCreate-calculate/commit/bf2795b72ea5e7c7cbded8da66caa06e615353ee))
+* webpack.config and devdependencies ([5f97fca](https://github.com/CoCreate-app/CoCreate-calculate/commit/5f97fcad7165a5332a0371b469f687d1fd7caa07))
+
 # [1.16.0](https://github.com/CoCreate-app/CoCreate-calculate/compare/v1.15.0...v1.16.0) (2025-04-11)
 
 

package/docs/index.html

@@ -46,7 +46,7 @@
 			id="menuL"
 			class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
 			resizable
-			resize-selector="[content_id='content']"
+			resize-query="[content_id='content']"
 			resize-property="margin-left"
 			resize-value="width">
 			<menu
@@ -75,7 +75,7 @@
 						share-width="700"
 						share-media="https://cdn.cocreate.app/docs/calculate.png"
 						hover="display:block!important"
-						hover-selector=".social-networks">
+						hover-query=".social-networks">
 						<div class="display:none social-networks">
 							<a
 								class="margin-right:15px"
@@ -134,11 +134,11 @@
 						class="border-bottom:1px_solid_lightgrey"
 						scroll
 						scroll-intersect="color:dodgerblue"
-						scroll-selector="#calculate-install-section">
+						scroll-query="#calculate-install-section">
 						<span
 							class="display:flex align-items:center width:fit-content"
 							hover="display:block!important"
-							hover-selector="[href='#calculate-install']">
+							hover-query="[href='#calculate-install']">
 							<h2 class="padding:5px_0px">Install</h2>
 							<a
 								class="margin-left:10px display:none"
@@ -159,11 +159,11 @@
 						class="margin-top:80px border-bottom:1px_solid_lightgrey"
 						scroll
 						scroll-intersect="color:dodgerblue"
-						scroll-selector="#calculate-usage-section">
+						scroll-query="#calculate-usage-section">
 						<span
 							class="display:flex align-items:center width:fit-content"
 							hover="display:block!important"
-							hover-selector="[href='#calculate-usage']">
+							hover-query="[href='#calculate-usage']">
 							<h2 class="padding:5px_0px">Usage</h2>
 							<a
 								class="margin-left:10px display:none"
@@ -193,11 +193,11 @@
 						class="margin-top:80px border-bottom:1px_solid_lightgrey"
 						scroll
 						scroll-intersect="color:dodgerblue"
-						scroll-selector="#calculate-attributes-section">
+						scroll-query="#calculate-attributes-section">
 						<span
 							class="display:flex align-items:center width:fit-content"
 							hover="display:block!important"
-							hover-selector="[href='#calculate-attributes']">
+							hover-query="[href='#calculate-attributes']">
 							<h2 class="padding:5px_0px">Attributes</h2>
 							<a
 								class="margin-left:10px display:none"
@@ -244,11 +244,11 @@
 						class="border-bottom:1px_solid_lightgrey"
 						scroll
 						scroll-intersect="color:dodgerblue"
-						scroll-selector="#calculate-demo-section">
+						scroll-query="#calculate-demo-section">
 						<span
 							class="display:flex align-items:center width:fit-content"
 							hover="display:block!important"
-							hover-selector="[href='#calculate-demo']">
+							hover-query="[href='#calculate-demo']">
 							<h2 class="padding:5px_0px">Demo</h2>
 							<a
 								class="margin-left:10px display:none"
@@ -295,7 +295,7 @@
 									show="#eye-slash"
 									hide="#eye, #demo-preview"
 									toggle="code-height"
-									toggle-selector="#demo-code"
+									toggle-query="#demo-code"
 									><i
 										class="height:18px"
 										src="/assets/svg/eye.svg"></i
@@ -307,7 +307,7 @@
 									show="#eye, #demo-preview"
 									hide="#eye-slash"
 									toggle="code-height"
-									toggle-selector="#demo-code"
+									toggle-query="#demo-code"
 									><i src="/assets/svg/eye-slash.svg"></i
 								></a>
 								<a
@@ -330,7 +330,7 @@
 								<a
 									class="margin-right:5px"
 									fullscreen
-									fullscreen-selector="#playground"></a>
+									fullscreen-query="#playground"></a>
 							</div>
 						</div>
 						<!-- End SandBox -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/calculate",
-  "version": "1.16.0",
+  "version": "1.16.2",
   "description": "A handy vanilla JavaScript calculator, concatenate multiple elements containing integers & execute calculates. Can be used for creating  invoices,making payments & any kind of complex calculate. Easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "calculate",
@@ -46,21 +46,17 @@
   },
   "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/element-prototype": "^1.23.0",
-    "@cocreate/observer": "^1.16.1",
-    "@cocreate/utils": "^1.33.7"
+    "@cocreate/element-prototype": "^1.29.1",
+    "@cocreate/observer": "^1.18.1",
+    "@cocreate/utils": "^1.39.0"
   }
 }

package/src/index.js

@@ -1,44 +1,59 @@
-import observer from "@cocreate/observer";
-import { queryElements } from "@cocreate/utils";
-// import { renderValue } from '@cocreate/render';
-import "@cocreate/element-prototype";
+import observer from "@cocreate/observer"; // Module for observing DOM mutations.
+import { queryElements } from "@cocreate/utils"; // Utility for querying DOM elements.
+import "@cocreate/element-prototype"; // Include custom element prototype extensions.
 
+// Initializes the calculation elements within the document.
 function init() {
+	// Select all elements in the document with a "calculate" attribute.
 	let calculateElements = document.querySelectorAll("[calculate]");
+	// Initialize each of the selected elements.
 	initElements(calculateElements);
 }
 
+// Initialize multiple elements by invoking initElement for each.
 function initElements(elements) {
+	// Iterate through the collection of elements and initialize each one.
 	for (let el of elements) initElement(el);
 }
 
+// Asynchronously initializes an individual element with setup for calculations.
 async function initElement(element) {
+	// Fetch the calculate string from the element's attribute.
 	let calculate = element.getAttribute("calculate");
+	// Return early if the calculate string contains placeholders or template syntax.
 	if (calculate.includes("{{") || calculate.includes("{[")) return;
 
-	let selectors = getSelectors(calculate);
+	// Extract selectors from the calculate attribute value.
+	let selectors = getSelectors(element.attributes["calculate"].value);
 
+	// Iterate through each selector and set up elements impacted by them.
 	for (let i = 0; i < selectors.length; i++) {
+		// Find input elements based on the selector criteria.
 		let inputs = queryElements({
 			element,
 			selector: selectors[i],
 			type: "selector"
 		});
 
+		// Set up events for each found input element.
 		for (let input of inputs) {
 			initEvent(element, input);
 		}
 
+		// Initialize an observer to monitor newly added nodes that match the selector.
 		observer.init({
 			name: "calculateSelectorInit",
 			types: ["addedNodes"],
 			selector: selectors[i],
+			// Callback function to run when nodes matching the selector are added.
 			callback(mutation) {
+				// Initialize events for the new element and update calculation.
 				initEvent(element, mutation.target);
 				setCalcationValue(element);
 			}
 		});
 	}
+	// Set initial calculation value when an element is being initialized.
 	setCalcationValue(element);
 }
 
@@ -110,34 +125,47 @@ function initEvent(element, input) {
 	});
 }
 
+// Asynchronously set the calculated value for the given element.
 async function setCalcationValue(element) {
+	// Get the expression or formula from the element's "calculate" attribute.
 	let calString = await getValues(element);
+	// Evaluate the formula and set the calculated value back to the element.
 	element.setValue(calculate(calString));
 }
 
+// Asynchronously retrieve values necessary for computing the calculation attribute of an element.
 async function getValues(element) {
+	// Get the expression that needs to be evaluated from the "calculate" attribute.
 	let calculate = element.getAttribute("calculate");
 
-	let selectors = getSelectors(calculate);
+	// Parse the expression to extract any selectors which values need to contribute to calculation.
+	let selectors = getSelectors(element.attributes["calculate"].value);
 
+	// For each selector, retrieve and calculate the respective value.
 	for (let i = 0; i < selectors.length; i++) {
-		let value = 0; // Default to 0 for missing inputs
+		let value = 0; // Default value in case no input is found for the selector.
+
+		// Query DOM elements based on selector.
 		let inputs = queryElements({
-			// Ensure queryElements can be awaited if needed
 			element,
 			selector: selectors[i],
 			type: "selector"
 		});
 
+		// Iterate through inputs/elements matched by the selector.
 		for (let input of inputs) {
+			// Initialize event listeners on inputs so that changes can update the calculation.
 			initEvent(element, input);
 			let val = null;
+
+			// Attempt to get the value from the input element, if it can provide it.
 			if (input.getValue) {
 				val = Number(await input.getValue());
 			}
 
+			// Only accumulate valid numeric values.
 			if (!Number.isNaN(val)) {
-				value += val; // Accumulate valid numeric values
+				value += val;
 			} else {
 				console.warn(
 					`Invalid value for selector "${selectors[i]}". Defaulting to 0.`
@@ -145,29 +173,29 @@ async function getValues(element) {
 			}
 		}
 
+		// Replace the placeholder in the calculation expression with the accumulated value.
 		calculate = calculate.replaceAll(`(${selectors[i]})`, value);
 	}
-
-	return calculate;
+	return calculate; // Return the resolved calculation expression.
 }
 
 // Defines mathematical constants available in expressions.
 const constants = { PI: Math.PI, E: Math.E };
 
-// Defines allowed mathematical functions and maps them to their JavaScript Math counterparts.
+// Defines allowed mathematical functions and maps them to their respective JavaScript Math counterparts.
 const functions = {
-	abs: Math.abs,
-	ceil: Math.ceil,
-	floor: Math.floor,
-	round: Math.round,
-	max: Math.max, // Note: RPN evaluator assumes arity 2 for max/min
-	min: Math.min, // Note: RPN evaluator assumes arity 2 for max/min
-	pow: Math.pow,
-	sqrt: Math.sqrt,
+	abs: Math.abs, // Absolute value
+	ceil: Math.ceil, // Ceiling function
+	floor: Math.floor, // Floor function
+	round: Math.round, // Round to nearest integer
+	max: Math.max, // Maximum value (assumes arity 2 in RPN)
+	min: Math.min, // Minimum value (assumes arity 2 in RPN)
+	pow: Math.pow, // Exponentiation
+	sqrt: Math.sqrt, // Square root
 	log: Math.log, // Natural logarithm
-	sin: Math.sin,
-	cos: Math.cos,
-	tan: Math.tan
+	sin: Math.sin, // Sine function
+	cos: Math.cos, // Cosine function
+	tan: Math.tan // Tangent function
 };
 
 /**
@@ -924,24 +952,25 @@ function calculate(expression) {
 	}
 }
 
-observer.init({
-	name: "CoCreateCalculateChangeValue",
-	types: ["attributes"],
-	attributeFilter: ["calculate"],
-	callback(mutation) {
-		setCalcationValue(mutation.target);
-	}
-});
-
-observer.init({
-	name: "CoCreateCalculateInit",
-	types: ["addedNodes"],
-	selector: "[calculate]",
-	callback(mutation) {
-		initElement(mutation.target);
+observer.init([
+	{
+		name: "CoCreateCalculateChangeValue",
+		types: ["attributes"],
+		attributeFilter: ["calculate"],
+		callback(mutation) {
+			setCalcationValue(mutation.target);
+		}
+	},
+	{
+		name: "CoCreateCalculateInit",
+		types: ["addedNodes"],
+		selector: "[calculate]",
+		callback(mutation) {
+			initElement(mutation.target);
+		}
 	}
-});
+]);
 
-init();
+init(); //
 
 export default { initElements, initElement, calculate };

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