@cocreate/elements 1.46.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.46.0",
+  "version": "2.0.0",
   "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",
@@ -22,30 +22,31 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/CoCreate-app/CoCreate-elements.git"
+    "url": "git+https://github.com/CoCreateJS/elements.git"
   },
   "author": "CoCreate LLC",
   "license": "AGPL-3.0",
   "bugs": {
-    "url": "https://github.com/CoCreate-app/CoCreate-elements/issues"
+    "url": "https://github.com/CoCreateJS/elements/issues"
   },
-  "homepage": "https://cocreate.app/docs/elements",
+  "homepage": "https://CoCreateJS.com/docs/elements",
   "funding": {
     "type": "GitHub Sponsors ❤",
-    "url": "https://github.com/sponsors/CoCreate-app"
+    "url": "https://github.com/sponsors/CoCreateJS"
   },
   "main": "./src/index.js",
   "dependencies": {
     "@cocreate/actions": "^1.24.0",
-    "@cocreate/crud-client": "^1.36.1",
+    "@cocreate/crud-client": "^1.37.0",
     "@cocreate/element-prototype": "^1.35.0",
-    "@cocreate/filter": "^1.36.0",
-    "@cocreate/observer": "^1.22.0",
-    "@cocreate/render": "^1.50.0",
-    "@cocreate/utils": "^1.52.0"
+    "@cocreate/filter": "^1.37.0",
+    "@cocreate/observer": "^1.23.0",
+    "@cocreate/render": "^1.51.0",
+    "@cocreate/socket-client": "^1.43.0",
+    "@cocreate/utils": "^1.54.0"
   },
   "devDependencies": {
-    "@cocreate/webpack": "^1.8.0"
+    "@cocreate/webpack": "^1.9.0"
   },
   "allowScripts": {
     "@cocreate/actions@1.21.4": true,

package/src/crudHandler.js

@@ -8,8 +8,11 @@ import CRUD from "@cocreate/crud-client";
 
 import { elements, keys, debounce } from "./mapRegistry.js";
 import { getDataObject } from "./getDataHandler.js";
-import { setData } from "./setDataHandler.js";
-import { deriveSubscriptionKeys } from "./subscribeHandler.js";
+import { setData, setDataType } from "./setDataHandler.js";
+import {
+    deriveSubscriptionKeys,
+    getSubscription
+} from "./subscribeHandler.js";
 
 /**
  * Reads data for one or more elements based on their dataKey scope.
@@ -26,8 +29,12 @@ export async function read(element, data, dataKey) {
             data = { ...existingData.dataKey.object };
     }
 
-    if (!dataKey || !data.type) return;
-    if (!data.$filter && (!data[data.type] || !data[data.type].length)) return;
+    if (!dataKey || !data?.type) {
+        return;
+    }
+    if (!data.filter && !data[data.type]) {
+        return;
+    }
 
     if (!(element instanceof HTMLCollection) && !Array.isArray(element))
         element = [element];
@@ -42,12 +49,10 @@ export async function read(element, data, dataKey) {
         if (
             isRead !== "false" &&
             !el.hasRead &&
-            (!data.$filter || (data.$filter && data.$filter.isFilter !== false))
+            (!data.filter || (data.filter && data.filter.isFilter !== false))
         ) {
             el.hasRead = true;
             delay.elements.set(el, true);
-        } else {
-            // console.log("read skipped", el);
         }
     }
 
@@ -55,26 +60,39 @@ export async function read(element, data, dataKey) {
 
     clearTimeout(delay.timer);
     delay.timer = setTimeout(function () {
-        if (!data.$filter && data.type === "object") {
-            if (!data.object) return;
+        // Detach this batch before sending so reads queued while the request is
+        // in flight cannot mutate (or later delete) the same element map.
+        const els = Array.from(delay.elements?.keys() || []);
+        if (debounce.get(dataKey.string) === delay)
+            debounce.delete(dataKey.string);
+        clearTimeout(delay.timer);
+        delete delay.elements;
+        delete delay.timer;
+
+        if (!els.length) return;
+
+        if (!data.filter && data.type === "object") {
+            if (!data.object) {
+                return;
+            }
             else if (typeof data.object === "string")
                 data.object = { _id: data.object };
             else if (Array.isArray(data.object)) {
                 if (data.object.length)
                     data.object = { _id: data.object[0]._id };
-            } else if (!data.object._id.match(/^[0-9a-fA-F]{24}$/)) return;
+            } else if (!data.object._id.match(/^[0-9a-fA-F]{24}$/)) {
+                return;
+            }
         }
 
         data.method = data.type + ".read";
+        const subscription = getSubscription(data);
+        if (subscription) data.subscription = subscription.string;
 
-        CRUD.send(data).then((responseData) => {
-            debounce.delete(dataKey.string);
-            let els = Array.from(delay.elements.keys());
-            clearTimeout(delay.timer);
-            delete delay.elements;
-            delete delay.timer;
-
-            setData(els, responseData);
+        CRUD.send(data).then(async (responseData) => {
+            if (responseData) {
+                await setData(els, responseData);
+            }
         });
     }, 500);
 }
@@ -111,8 +129,17 @@ export async function save(element, action) {
 
         value = await element.getValue();
         let key = element.getAttribute("key");
-
-        if (typeof data[data.type] === "string")
+        if (data.type === "object" && !data.object) {
+            if (key == "{}") {
+                if (Array.isArray(value)) {
+                    data[data.type] = value.map((v) => ({ ...v }));
+                } else
+                    data[data.type] = value;
+            } else {
+                data[data.type] = { [key]: value };
+            }
+        }
+        else if (typeof data[data.type] === "string")
             if (key == "{}")
                 data[data.type] = { _id: data[data.type], ...value };
             else data[data.type] = { _id: data[data.type], [key]: value };
@@ -178,24 +205,33 @@ export async function save(element, action) {
                 array: data[i].array,
                 key: data[i].key,
                 object: data[i].object._id,
-                value
+                value,
+                realtime: true,
+                commit: true
             });
         }
 
         // Derive and attach subscriptionKeys array (contains specific document key and list key)
+        const subscription = getSubscription(data[i]);
+        if (subscription) data[i].subscription = subscription.string;
         data[i].subscriptionKeys = deriveSubscriptionKeys(data[i]);
 
         data[i] = await CRUD.send(data[i]);
+        const errors = data[i]?.error;
+        if (!data[i] || (Array.isArray(errors) ? errors.length > 0 : !!errors)) {
+            const message = Array.isArray(errors)
+                ? errors.map((error) => error.message || String(error)).join("; ")
+                : errors?.message || String(errors || "Save failed");
+            throw new Error(message);
+        }
 
         responseDataList.push(data[i]);
 
         if (
             data[i] &&
-            (data[i].method.endsWith(".create") ||
-                (data[i].type !== "object" &&
-                    data[i].method.endsWith(".update")))
+            (data[i].method.endsWith(".create") || data[i].method.endsWith(".update"))
         ) {
-            setDataType(element, data[i], action);
+            await setDataType(element, data[i], action);
         } else if (data[i]) {
             if (action) {
                 action.element.dispatchEvent(
@@ -220,8 +256,49 @@ Actions.init([
     {
         name: "save",
         endEvent: "saved",
-        callback: (action) => {
-            if (action.form || action) save(action.form, action);
+        callback: async (action) => {
+            if (action.element.hasAttribute("save-query")) {
+                const targets = queryElements({
+                    element: action.element,
+                    prefix: "save"
+                });
+
+                if (!targets.length) {
+                    action.abort({
+                        code: "save-target-not-found",
+                        message: "The save target could not be found.",
+                        selector: action.element.attributes.getNamedItem("save-query")?.value
+                    });
+                    return;
+                }
+
+                try {
+                    const result = [];
+                    for (const target of targets) {
+                        result.push(await save(target));
+                    }
+                    action.end({ result });
+                } catch (error) {
+                    action.abort({
+                        code: "save-failed",
+                        message: "Unable to save the form.",
+                        cause: error
+                    });
+                    console.error("Save action failed:", error);
+                }
+                return;
+            }
+
+            try {
+                await save(action.form || action.element, action);
+            } catch (error) {
+                action.abort({
+                    code: "save-failed",
+                    message: "Unable to save the form.",
+                    cause: error
+                });
+                console.error("Save action failed:", error);
+            }
         }
     },
     {
@@ -238,34 +315,63 @@ Actions.init([
                 elements = [action.element];
             }
 
+            const groups = new Map();
             for (let i = 0; i < elements.length; i++) {
                 const data = getDataObject(elements[i]);
-                if (!data) return;
+                if (!data) continue;
                 data.method = data.type + ".delete";
 
-                if (elements[i].renderValue) {
-                    let selected = elements[i].querySelectorAll(".selected");
-                    data[data.type] = [];
-                    for (let j = 0; j < selected.length; j++) {
-                        let attribute = selected[j].getAttribute(data.type);
-                        if (attribute) {
-                            attribute = attribute.split(",");
-                            for (let k = 0; k < attribute.length; k++) {
-                                if (data.type === "object")
-                                    data[data.type].push({ _id: attribute[k] });
-                                else {
-                                    data[data.type].push(attribute[k]);
-                                }
-                            }
-                        }
-                    }
-                } else if (
+                if (
                     data.type === "object" &&
                     typeof data[data.type] === "string"
                 )
                     data[data.type] = { _id: data[data.type] };
 
-                // Attach subscriptionKeys before sending delete payload
+                if (data.type !== "object") {
+                    groups.set(Symbol(), data);
+                    continue;
+                }
+
+                const groupKey = JSON.stringify({
+                    storage: data.storage || "",
+                    database: data.database || "",
+                    array: data.array
+                });
+                const objects = Array.isArray(data.object)
+                    ? data.object
+                    : [data.object];
+                let group = groups.get(groupKey);
+
+                if (!group) {
+                    group = {
+                        ...data,
+                        object: [],
+                        objectIds: new Set()
+                    };
+                    groups.set(groupKey, group);
+                }
+
+                for (const object of objects) {
+                    if (!object || !object._id || group.objectIds.has(object._id))
+                        continue;
+                    group.objectIds.add(object._id);
+                    group.object.push({ _id: object._id });
+                }
+            }
+
+            for (const data of groups.values()) {
+                if (data.objectIds) {
+                    delete data.objectIds;
+                    if (!data.object.length) continue;
+                }
+
+                // Subscribe the requester at collection scope. A grouped object
+                // array is a delete payload, not a subscribable document key.
+                const subscriptionData = { ...data };
+                delete subscriptionData.object;
+                const subscription = getSubscription(subscriptionData);
+                if (subscription)
+                    data.subscription = subscription.string;
                 data.subscriptionKeys = deriveSubscriptionKeys(data);
 
                 let response = await CRUD.send(data);
@@ -279,4 +385,4 @@ Actions.init([
     }
 ]);
 
-export default { read, save };
+export default { read, save };

package/src/dataHandler.js

@@ -0,0 +1,7 @@
+// CRUD runtime. Loaded by data selectors, CRUD actions, or an Elements API call.
+import "@cocreate/element-prototype";
+
+export { init } from "./initHandler.js";
+export { read, save } from "./crudHandler.js";
+export { getData } from "./getDataHandler.js";
+export { setDataType } from "./setDataHandler.js";

package/src/dataObject.js

@@ -0,0 +1,54 @@
+import { getAttributes, checkValue } from "@cocreate/utils";
+
+export const environment = localStorage.getItem("environment");
+
+/**
+ * Parses and normalizes HTML attributes from an element into a canonical CRUD data object.
+ * Infers execution type (object, index, array, database, storage, data) dynamically.
+ *
+ * @param {Element} element
+ * @returns {Object|undefined} Normalized data payload object
+ */
+export function getDataObject(element) {
+    const data = getAttributes(element);
+    const crudType = ["storage", "database", "array", "index", "object"];
+
+    for (let i = 0; i < crudType.length; i++) {
+        if (!checkValue(data[crudType[i]])) return;
+
+        if (data[crudType[i]] && data[crudType[i]].includes(",")) {
+            const array = data[crudType[i]].split(",");
+            data[crudType[i]] = [];
+
+            for (let j = 0; j < array.length; j++) {
+                const item = array[j].trim();
+                if (crudType[i] === "object") {
+                    data[crudType[i]].push({ _id: item });
+                } else {
+                    data[crudType[i]].push(item);
+                }
+            }
+        }
+    }
+
+    if (data.object || data.object === "" || data.key || data.key === "") {
+        if (!data.array || (data.array && !data.array.length)) return;
+        data.type = "object";
+    } else if (data.index || data.index === "") {
+        if (!data.array || (data.array && !data.array.length)) return;
+        data.type = "index";
+    } else if (data.array || data.array === "") data.type = "array";
+    else if (data.database || data.database === "") data.type = "database";
+    else if (data.storage || data.storage === "") data.type = "storage";
+    else if (data.data) data.type = "data";
+
+    if (
+        environment &&
+        !data.database &&
+        ["array", "index", "object"].includes(data.type)
+    )
+        data.database = environment;
+
+    delete data.isRealtime;
+    return data;
+}