@cocreate/elements 1.41.1 → 1.42.1

package/src/index.js

@@ -40,6 +40,7 @@ import { render, renderValue, renderedNodes } from "@cocreate/render";
 import "@cocreate/element-prototype";
 import "./fetchSrc";
 import { reset } from "./form";
+import "./value.js";
 
 const selector = "[storage], [database], [array], [render-json]";
 const elements = new Map();
@@ -67,9 +68,9 @@ async function init(element) {
 		!(element instanceof HTMLCollection) &&
 		!(element instanceof NodeList) &&
 		!Array.isArray(element)
-	)
+	) {
 		element = [element];
-	else if (!element) {
+	} else if (!element) {
 		element = document.querySelectorAll(selector);
 		initSocket();
 	}
@@ -462,7 +463,12 @@ async function filterData(element, data, type, key) {
 		}
 
 		let property = key;
-		if (operator) property = property.replace(operator + ".", "");
+		if (operator) {
+			property = property.replace(operator + ".", "");
+			if (operator === "$sum") {
+				value = 0;
+			}
+		}
 		if (Array.isArray(data[type])) {
 			let Data = [],
 				isObject;
@@ -482,7 +488,7 @@ async function filterData(element, data, type, key) {
 				if (docValue) {
 					if (operator === "$sum" && typeof docValue === "number") {
 						if (typeof value !== "number") value = 0;
-						value += docValue;
+						value += docValue || 0;
 					} else if (Array.isArray(docValue)) {
 						Data.push(...docValue);
 					} else {
@@ -844,11 +850,7 @@ async function getData(form) {
 				if (attribute.includes("save", "delete")) continue;
 			}
 
-			if (
-				element.matches(
-					"[render-selector], [render-closest], [render-parent], [render-next], [render-previous]"
-				)
-			) {
+			if (element.matches("[render-query]")) {
 				let type = element.getAttribute("type");
 				if (type !== "file") continue;
 			}
@@ -991,7 +993,7 @@ async function getData(form) {
 			}
 
 			//dataKey should be used to group
-			let key = dataKey + Data.method;
+			let key = dataKey; //+ Data.method;
 			if (dataKeys.has(key)) {
 				let storedData = dataKeys.get(key)[Data.type];
 				dataKeys.get(key)[Data.type] = {
@@ -1010,7 +1012,7 @@ async function getData(form) {
 	return dataArray;
 }
 
-async function save(element) {
+async function save(element, action) {
 	if (!element) return;
 	let data, value;
 	let upsert = element.getAttribute("upsert");
@@ -1116,19 +1118,28 @@ async function save(element) {
 				(data[i].type !== "object" &&
 					data[i].method.endsWith(".update")))
 		) {
-			setTypeValue(element, data[i]);
-		} else if (data[i])
-			document.dispatchEvent(
-				new CustomEvent("saved", {
-					detail: data[i]
-				})
-			);
+			setTypeValue(element, data[i], action);
+		} else if (data[i]) {
+			if (action) {
+				action.element.dispatchEvent(
+					new CustomEvent("saved", {
+						detail: data
+					})
+				);
+			} else {
+				document.dispatchEvent(
+					new CustomEvent("saved", {
+						detail: data
+					})
+				);
+			}
+		}
 	}
 
 	return Data;
 }
 
-function setTypeValue(element, data) {
+function setTypeValue(element, data, action) {
 	// TODO: if an array name is updated, the attibute array="" needs to be updated.
 
 	if (!data) return;
@@ -1164,7 +1175,7 @@ function setTypeValue(element, data) {
 		}
 		setData(Array.from(elements.keys()), data);
 
-		//     const state_ids = new Map();
+		//     const state_ids = new Map()
 
 		//     let state_id = form.getAttribute('state_id');
 		//     if (state_id) {
@@ -1217,11 +1228,19 @@ function setTypeValue(element, data) {
 		//     }
 	}
 
-	document.dispatchEvent(
-		new CustomEvent("saved", {
-			detail: data
-		})
-	);
+	if (action) {
+		action.element.dispatchEvent(
+			new CustomEvent("saved", {
+				detail: data
+			})
+		);
+	} else {
+		document.dispatchEvent(
+			new CustomEvent("saved", {
+				detail: data
+			})
+		);
+	}
 }
 
 async function remove(element) {
@@ -1291,6 +1310,9 @@ function initSocket() {
 				if (data.rendered) return;
 
 				data.rendered = true;
+				if (data && data.key === "answers") {
+					console.log("test");
+				}
 
 				setData(null, data);
 			});
@@ -1300,7 +1322,7 @@ function initSocket() {
 
 Observer.init({
 	name: "render",
-	observe: ["addedNodes"],
+	types: ["addedNodes"],
 	selector: "[render-clone]",
 	callback: function (mutation) {
 		if (!mutation.parentElement.hasAttribute("dnd")) return;
@@ -1449,16 +1471,16 @@ function dndCrudSend(data, crudType) {
 
 Observer.init({
 	name: "CoCreateElementsChildList",
-	observe: ["childList"],
+	types: ["addedNodes"],
 	selector: selector,
 	callback: function (mutation) {
-		init(mutation.addedNodes);
+		init([mutation.target]);
 	}
 });
 
 Observer.init({
 	name: "CoCreateElementsRemovedNodes",
-	observe: ["removedNodes"],
+	types: ["removedNodes"],
 	selector: selector,
 	callback: function (mutation) {
 		// if (mutation.target.parentElement) return
@@ -1476,8 +1498,8 @@ Observer.init({
 
 Observer.init({
 	name: "CoCreateElementsAttributes",
-	observe: ["attributes"],
-	attributeName: [
+	types: ["attributes"],
+	attributeFilter: [
 		"organization_id",
 		"host",
 		"storage",
@@ -1491,8 +1513,8 @@ Observer.init({
 	callback: function (mutation) {
 		let currentValue = mutation.target.getAttribute(mutation.attributeName);
 		if (currentValue !== mutation.oldValue) {
-			remove(mutation.target);
 			if (mutation.target.tagName === "FORM") return;
+			remove(mutation.target);
 			init([mutation.target]);
 		}
 	}
@@ -1503,7 +1525,7 @@ Actions.init([
 		name: "save",
 		endEvent: "saved",
 		callback: (action) => {
-			if (action.form) save(action.form);
+			if ((action.form, action)) save(action.form, action);
 		}
 	},
 	{
@@ -1512,11 +1534,15 @@ Actions.init([
 		callback: async (action) => {
 			// TODO: use selector to target elements for deletion if element is apart of render get render get rendering element for more crud detils
 			// this way any selector can be used to target crud deletions not just .selected
-			let elements = queryElements({
-				element: action.element,
-				prefix: "delete"
-			});
-			if (elements === false) elements = [action.element];
+			let elements = [];
+			if (action.element.hasAttribute("delete-query")) {
+				elements = queryElements({
+					element: action.element,
+					prefix: "delete"
+				});
+			} else {
+				elements = [action.element];
+			}
 
 			for (let i = 0; i < elements.length; i++) {
 				const data = getObject(elements[i]);
@@ -1546,7 +1572,7 @@ Actions.init([
 					data[data.type] = { _id: data[data.type] };
 
 				let response = await CRUD.send(data);
-				document.dispatchEvent(
+				action.element.dispatchEvent(
 					new CustomEvent("deleted", {
 						detail: response
 					})

package/src/value.js

@@ -0,0 +1,106 @@
+import Observer from "@cocreate/observer";
+import "@cocreate/element-prototype";
+import { queryElements } from "@cocreate/utils";
+
+const selector = "[value-query]";
+
+/**
+ * Initializes elements with value-* attributes to enable dynamic value retrieval and setting.
+ *
+ * @param {HTMLElement|HTMLCollection|NodeList|Array<HTMLElement>} [element] - Optional element(s) to initialize. If not provided, initializes all matching elements in the document.
+ */
+async function init(element) {
+	if (
+		element &&
+		!(element instanceof HTMLCollection) &&
+		!(element instanceof NodeList) &&
+		!Array.isArray(element)
+	) {
+		element = [element];
+	} else if (!element) {
+		element = document.querySelectorAll(selector);
+	}
+
+	for (let i = 0; i < element.length; i++) {
+		initElement(element[i]);
+	}
+}
+
+/**
+ * Initializes a single element with value-* attributes.
+ *
+ * @param {HTMLElement} element - The element to initialize.
+ */
+function initElement(element) {
+	let targets = queryElements({ element, prefix: "value" });
+
+	valueHandler(element, targets, true);
+}
+
+/**
+ * Handles the retrieval and setting of values based on value-* attributes.
+ *
+ * @param {HTMLElement} element - The element to set the value on.
+ * @param {object} targets - An object containing elements retrieved by queryElements().
+ */
+function valueHandler(element, targets, initialize) {
+	let values = [];
+	// TODO: consdier the potential of targets being an array of elements, should value be an array of the values?
+	for (let i = 0; i < targets.length; i++) {
+		if (!targets[i] || !targets[i].isConnected) {
+			targets.splice(i, 1); // Remove the element
+			i -= 1; // Adjust the index
+			continue; // Skip to the next iteration
+		}
+
+		if (initialize) {
+			// Remove existing listener (if any)
+			targets[i].removeEventListener("input", elementValueHandler);
+
+			// Add new listener
+			targets[i].addEventListener("input", elementValueHandler);
+		}
+
+		values.push(targets[i].getValue());
+	}
+
+	if (!values.length) {
+		return;
+	} else if (values.length === 1) {
+		values = values[0];
+	}
+
+	let attribute = element.getAttribute("value-attribute");
+	if (attribute) {
+		element.setAttribute(attribute, values);
+	} else {
+		element.setValue(values);
+	}
+
+	function elementValueHandler(e) {
+		valueHandler(element, targets);
+	}
+}
+
+init();
+
+Observer.init({
+	name: "CoCreateElementsValueAdded",
+	types: ["addedNodes"],
+	selector: selector,
+	callback: function (mutation) {
+		init(mutation.target);
+	}
+});
+
+Observer.init({
+	name: "CoCreateElementsAttributes",
+	types: ["attributes"],
+	attributeFilter: ["value-query"],
+	callback: function (mutation) {
+		let currentValue = mutation.target.getAttribute(mutation.attributeName);
+		if (currentValue !== mutation.oldValue) {
+			initElement(mutation.target);
+		}
+	}
+});

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