@cocreate/elements 1.42.0 → 1.42.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.42.0",
+  "version": "1.42.1",
   "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
   "keywords": [
     "elements",
@@ -45,25 +45,21 @@
   },
   "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/actions": "^1.18.4",
-    "@cocreate/crud-client": "^1.33.11",
-    "@cocreate/element-prototype": "^1.23.0",
-    "@cocreate/filter": "^1.15.1",
-    "@cocreate/observer": "^1.16.3",
-    "@cocreate/render": "^1.41.3",
-    "@cocreate/utils": "^1.34.1"
+    "@cocreate/actions": "^1.21.0",
+    "@cocreate/crud-client": "^1.34.1",
+    "@cocreate/element-prototype": "^1.29.0",
+    "@cocreate/filter": "^1.33.1",
+    "@cocreate/observer": "^1.18.0",
+    "@cocreate/render": "^1.45.1",
+    "@cocreate/utils": "^1.38.0"
   }
 }

package/src/fetchSrc.js

@@ -1,4 +1,5 @@
 import observer from "@cocreate/observer";
+import { ObjectId } from "@cocreate/utils";
 
 const selector =
 	"[src]:not(img, video, audio, script, input, iframe, frame, link, source), [source], [stream]";
@@ -46,8 +47,12 @@ async function initElements(elements) {
 							pathElement.getAttribute("path") || getPath();
 						if (path) text = text.replaceAll("$relativePath", path);
 					}
+
+					text = text.replaceAll("ObjectId()", () => {
+						// Generate a NEW ObjectId inside the function
+						return ObjectId().toString(); // Return its string representation
+					});
 					element.setValue(text);
-					initializing.delete(element);
 				}
 			}
 		} catch (err) {
@@ -269,8 +274,9 @@ observer.init({
 		if (
 			mutation.oldValue !==
 			mutation.target.getAttribute(mutation.attributeName)
-		)
+		) {
 			init(mutation.target);
+		}
 	}
 });
 

package/src/index.js

@@ -68,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();
 	}
@@ -850,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;
 			}
@@ -997,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] = {
@@ -1314,6 +1310,9 @@ function initSocket() {
 				if (data.rendered) return;
 
 				data.rendered = true;
+				if (data && data.key === "answers") {
+					console.log("test");
+				}
 
 				setData(null, data);
 			});
@@ -1514,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]);
 		}
 	}
@@ -1535,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]);

package/src/value.js

@@ -1,8 +1,8 @@
 import Observer from "@cocreate/observer";
 import "@cocreate/element-prototype";
+import { queryElements } from "@cocreate/utils";
 
-const selector =
-	"[value-selector], [value-closest], [value-parent], [value-next], [value-previous], [value-document], [value-frame], [value-top]";
+const selector = "[value-query]";
 
 /**
  * Initializes elements with value-* attributes to enable dynamic value retrieval and setting.
@@ -32,7 +32,7 @@ async function init(element) {
  * @param {HTMLElement} element - The element to initialize.
  */
 function initElement(element) {
-	let targets = element.queryElements();
+	let targets = queryElements({ element, prefix: "value" });
 
 	valueHandler(element, targets, true);
 }
@@ -43,7 +43,7 @@ function initElement(element) {
  * @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) {
+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++) {
@@ -96,16 +96,7 @@ Observer.init({
 Observer.init({
 	name: "CoCreateElementsAttributes",
 	types: ["attributes"],
-	attributeFilter: [
-		"value-selector",
-		"value-closest",
-		"value-parent",
-		"value-next",
-		"value-previous",
-		"value-document",
-		"value-frame",
-		"value-top"
-	],
+	attributeFilter: ["value-query"],
 	callback: function (mutation) {
 		let currentValue = mutation.target.getAttribute(mutation.attributeName);
 		if (currentValue !== mutation.oldValue) {

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;
+};