@cocreate/elements 1.43.2 → 1.44.2

package/.github/workflows/automated.yml

@@ -9,33 +9,36 @@ jobs:
   about:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - name: Jaid/action-sync-node-meta
-        uses: jaid/action-sync-node-meta@v1.4.0
-        with:
-          direction: overwrite-github
-          githubToken: "${{ secrets.GITHUB }}"
+      - name: Checkout repository
+        uses: actions/checkout@v7
+
+      - name: Sync package.json description to GitHub About
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB }}
+        run: |
+          DESC=$(jq -r '.description // empty' package.json)
+          if [ -n "$DESC" ]; then
+            echo "Updating repository description to: $DESC"
+            gh api -X PATCH repos/${{ github.repository }} -f description="$DESC"
+          else
+            echo "No description found in package.json."
+          fi
 
   release:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
+      - name: Checkout repository
+        uses: actions/checkout@v7
         with:
-          fetch-depth: 0 # Required so semantic-release can trace git tags/history
+          fetch-depth: 0
+          token: ${{ secrets.GITHUB }} # Authenticates git CLI for tag/commit pushes
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v7
         with:
-          node-version: 22
+          node-version: '24'
 
       - name: Install Semantic Release & Plugins
-        # Installs semantic-release and its plugins on the runner
         run: |
           npm install -g semantic-release \
             @semantic-release/changelog \
@@ -43,12 +46,11 @@ jobs:
             @semantic-release/github \
             @semantic-release/git
 
-      - name: Run Semantic Release (Native)
+      - name: Run Semantic Release
         id: semantic
-        # This will automatically pick up your export default config file in the repository root
         run: npx semantic-release
         env:
-          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+          GITHUB_TOKEN: "${{ secrets.GITHUB }}"
           NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
 
     outputs:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.43.2",
+  "version": "1.44.2",
   "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",
@@ -36,16 +36,16 @@
   },
   "main": "./src/index.js",
   "dependencies": {
-    "@cocreate/actions": "^1.22.1",
-    "@cocreate/crud-client": "^1.35.0",
-    "@cocreate/element-prototype": "^1.33.0",
-    "@cocreate/filter": "^1.34.0",
-    "@cocreate/observer": "^1.20.0",
-    "@cocreate/render": "^1.48.0",
-    "@cocreate/utils": "^1.44.0"
+    "@cocreate/actions": "^1.23.0",
+    "@cocreate/crud-client": "^1.36.0",
+    "@cocreate/element-prototype": "^1.34.0",
+    "@cocreate/filter": "^1.35.0",
+    "@cocreate/observer": "^1.21.0",
+    "@cocreate/render": "^1.49.0",
+    "@cocreate/utils": "^1.50.0"
   },
   "devDependencies": {
-    "@cocreate/webpack": "^1.6.0"
+    "@cocreate/webpack": "^1.7.0"
   },
   "allowScripts": {
     "@cocreate/actions@1.21.4": true,
@@ -62,7 +62,6 @@
     "@cocreate/render@1.46.1": true,
     "@cocreate/socket-client@1.40.5": true,
     "@cocreate/utils@1.42.2": true,
-    "@cocreate/uuid@1.12.4": true,
     "@cocreate/webpack@1.4.3": true
   }
 }

package/src/crudHandler.js

@@ -0,0 +1,282 @@
+import {
+    queryElements,
+    getAttributeNames,
+    checkValue
+} from "@cocreate/utils";
+import Actions from "@cocreate/actions";
+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";
+
+/**
+ * Reads data for one or more elements based on their dataKey scope.
+ * 
+ * @param {Element|Element[]} element - Element(s) to read data for
+ * @param {Object} [data] - CRUD payload override
+ * @param {Object} [dataKey] - Data key reference
+ */
+export async function read(element, data, dataKey) {
+    if (!dataKey) dataKey = { string: elements.get(element) };
+    if (!data) {
+        let existingData = keys.get(dataKey.string);
+        if (existingData && existingData.dataKey && existingData.dataKey.object)
+            data = { ...existingData.dataKey.object };
+    }
+
+    if (!dataKey || !data.type) return;
+    if (!data.$filter && (!data[data.type] || !data[data.type].length)) return;
+
+    if (!(element instanceof HTMLCollection) && !Array.isArray(element))
+        element = [element];
+
+    let delay = debounce.get(dataKey.string);
+    if (!delay) debounce.set(dataKey.string, (delay = {}));
+
+    if (!delay.elements) delay.elements = new Map();
+
+    for (let el of element) {
+        const isRead = el.getAttribute("read");
+        if (
+            isRead !== "false" &&
+            !el.hasRead &&
+            (!data.$filter || (data.$filter && data.$filter.isFilter !== false))
+        ) {
+            el.hasRead = true;
+            delay.elements.set(el, true);
+        } else {
+            // console.log("read skipped", el);
+        }
+    }
+
+    if (!delay.elements.size) return;
+
+    clearTimeout(delay.timer);
+    delay.timer = setTimeout(function () {
+        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;
+        }
+
+        data.method = data.type + ".read";
+
+        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);
+        });
+    }, 500);
+}
+
+/**
+ * Persists modifications for a single element or a form container to the database.
+ * Derives and attaches subscriptionKeys (both document-specific and list-scoped)
+ * prior to dispatching via CRUD.send().
+ * 
+ * @param {Element} element - Input element or FORM instance
+ * @param {Object} [action] - Action metadata object
+ * @returns {Promise<Object[]>}
+ */
+export async function save(element, action) {
+    if (!element) return;
+    let data, value, form;
+    let upsert = element.getAttribute("upsert");
+    if (upsert && upsert !== "false") upsert = true;
+
+    if (element.tagName === "FORM") {
+        data = await element.getData();
+    } else {
+        let isSave = element.getAttribute("save");
+        if (isSave === "false") return;
+        if (action) {
+            form = element.closest("form");
+            if (form) {
+                return save(form);
+            }
+        }
+
+        let dataKey = elements.get(element);
+        data = { ...keys.get(dataKey).dataKey.object };
+
+        value = await element.getValue();
+        let key = element.getAttribute("key");
+
+        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 };
+        else if (typeof data[data.type] === "object")
+            if (key == "{}") data[data.type] = { ...data[data.type], ...value };
+            else data[data.type][key] = value;
+
+        if (/\.([0-9]*)/g.test(data.key)) {
+            let splice = element.getAttribute("splice");
+            let slice = element.getAttribute("slice");
+            let update = element.getAttribute("update");
+
+            if (splice || splice === "") {
+                data[data.type][key] = { $splice: value };
+            } else if (slice) {
+                data[data.type][key] = "$delete";
+            } else if (update) {
+                value = data.key.replace(/\[.*?\]/, "[" + value + "]");
+                data.updateKey[key] = value;
+                data[data.type][key] = { $update: value };
+            }
+        }
+
+        data = [data];
+    }
+
+    let responseDataList = [];
+    for (let i = 0; i < data.length; i++) {
+        if (data[i].type === "object") {
+            let hasId = false;
+
+            if (typeof data[i].object === "string") {
+                hasId = !!data[i]._id || !!data[i].object;
+            } else if (Array.isArray(data[i].object)) {
+                hasId = !!data[i].object[0]?._id;
+            } else if (typeof data[i].object === "object" && data[i].object !== null) {
+                hasId = !!data[i].object?._id;
+            }
+
+            if (!data[i].object || !hasId) {
+                data[i].method = "object.create";
+            } else {
+                data[i].method = "object.update";
+                if (upsert) data[i].upsert = true;
+            }
+        }
+
+        if (data[i].isUpsert) {
+            data[i].upsert = true;
+            delete data[i].isUpsert;
+        }
+
+        if (data[i].method && data[i].method.endsWith(".create")) {
+            element.setAttribute(data[i].type, "pending");
+        } else if (
+            data[i].method &&
+            data[i].method.endsWith(".update") &&
+            data[i].type == "object" &&
+            typeof value == "string" &&
+            window.CoCreate?.crdt
+        ) {
+            return window.CoCreate.crdt.replaceText({
+                array: data[i].array,
+                key: data[i].key,
+                object: data[i].object._id,
+                value
+            });
+        }
+
+        // Derive and attach subscriptionKeys array (contains specific document key and list key)
+        data[i].subscriptionKeys = deriveSubscriptionKeys(data[i]);
+
+        data[i] = await CRUD.send(data[i]);
+
+        responseDataList.push(data[i]);
+
+        if (
+            data[i] &&
+            (data[i].method.endsWith(".create") ||
+                (data[i].type !== "object" &&
+                    data[i].method.endsWith(".update")))
+        ) {
+            setDataType(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 responseDataList;
+}
+
+Actions.init([
+    {
+        name: "save",
+        endEvent: "saved",
+        callback: (action) => {
+            if (action.form || action) save(action.form, action);
+        }
+    },
+    {
+        name: "delete",
+        endEvent: "deleted",
+        callback: async (action) => {
+            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 = getDataObject(elements[i]);
+                if (!data) return;
+                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 (
+                    data.type === "object" &&
+                    typeof data[data.type] === "string"
+                )
+                    data[data.type] = { _id: data[data.type] };
+
+                // Attach subscriptionKeys before sending delete payload
+                data.subscriptionKeys = deriveSubscriptionKeys(data);
+
+                let response = await CRUD.send(data);
+                action.element.dispatchEvent(
+                    new CustomEvent("deleted", {
+                        detail: response
+                    })
+                );
+            }
+        }
+    }
+]);
+
+export default { read, save };

package/src/dndHandler.js

@@ -0,0 +1,155 @@
+import { dotNotationToObject } from "@cocreate/utils";
+import CRUD from "@cocreate/crud-client";
+import Observer from "@cocreate/observer";
+import { render, renderValue, renderedNodes } from "@cocreate/render";
+import { elements, keys, debounce } from "./mapRegistry.js"
+
+// TODO: has the potential to work on most of the crud elements specifically if the value is an object or an array
+async function dndCrud(draggedEl, draggedFrom, droppedEl, droppedIn) {
+    let from = await dndCrudData(draggedEl, draggedFrom, "remove");
+    let to = await dndCrudData(droppedEl, droppedIn, "add");
+
+    if (from && to && !draggedFrom.isSameNode(droppedIn)) {
+        let element = getDataElements(from.data);
+        if (!element.length) return;
+
+        if (!element.includes(droppedIn)) {
+            if (from.keyPath.includes(".")) {
+                let test = { [from.keyPath]: undefined };
+
+                from.clonedParentData = dotNotationToObject(test, from.clonedParentData);
+                dndCrudSend(from.clonedParentData, "update");
+            } else {
+                const index = from.keyPath.match(/\[(\d+)\]/);
+                let removeData = from.clonedParentData[from.clonedParentData.type].splice(
+                    index,
+                    1
+                )[0];
+                if (removeData) {
+                    removeData.type = from.clonedParentData.type;
+                    removeData[removeData.type] = removeData;
+                    dndCrudSend(removeData, "delete");
+                }
+
+                if (from.clonedParentData[from.clonedParentData.type].length)
+                    dndCrudSend(from.clonedParentData, "update");
+            }
+        }
+    }
+
+    if (to) dndCrudSend(to.clonedParentData, "update");
+}
+
+async function dndCrudData(element, parent, operator) {
+    if (!elements.has(parent)) return;
+    let data = await parent.getData();
+    let clonedParentData = getDataObject(parent);
+
+    let { dragData, sortName, sortDirection, keyPath, clones, index } = dndNewData(
+        element,
+        data
+    );
+    clonedParentData[clonedParentData.type] = [];
+
+    if (sortName) {
+        for (let i = 0; i < clones.length; i++) {
+            if (i > index) {
+                let previousData = data[data.type][index];
+                dragData[sortName] = operator === "add" ? i + 1 : i - 1;
+
+                clonedParentData[clonedParentData.type].push({ ...previousData, ...dragData });
+            }
+        }
+    } else {
+        clonedParentData[clonedParentData.type] = [{ ...data[data.type][index], ...dragData }];
+    }
+
+    return { data, clonedParentData, keyPath, clones, index };
+}
+
+function dndNewData(element, data) {
+    let dragData = {};
+    if (data.$filter.query) {
+        dndNewDataUpdate(dragData, data.$filter.query);
+    }
+
+    let sortName, sortDirection;
+    let sort = data.$filter.sort;
+    if (sort && sort.length) {
+        for (let i = sort.length - 1; i >= 0; i--) {
+            if (typeof data[sort.key] === "number") {
+                sortName = sort.key;
+                sortDirection = sort.direction;
+                break;
+            }
+        }
+    }
+
+    let keyPath, clonesMap, clones, index;
+
+    let renderedNode = renderedNodes.get(element);
+    if (renderedNode) {
+        keyPath = renderedNode.keyPath;
+        clonesMap = renderedNode.template.clones;
+        clones = Array.from(clonesMap.values());
+        index = clones.indexOf(element);
+    }
+
+    return { dragData, sortName, sortDirection, keyPath, clones, index };
+}
+
+function dndNewDataUpdate(dragData, query) {
+    for (let key of Object.keys(query)) {
+        if (key === "$and" || key === "$or" || key === "$nor") {
+            for (let i = 0; i < query[key].length; i++) {
+                dndNewDataUpdate(dragData, query[key][i]);
+            }
+        } else if (
+            typeof query[key] === "object" &&
+            !Array.isArray(query[key])
+        ) {
+            if (query[key].$eq) dragData[key] = query[key].$eq;
+            if (query[key].$ne) dragData[key] = query[key].$ne;
+        } else {
+            dragData[key] = query[key];
+        }
+    }
+}
+
+function dndCrudSend(data, crudType) {
+    if (CRUD) {
+        let action = data.type;
+        action = action.charAt(0).toUpperCase() + action.slice(1);
+        CRUD[crudType + action](data);
+    } else console.log("dnd reordered data set as crud is unavailable");
+}
+
+Observer.init({
+    name: "render",
+    types: ["addedNodes"],
+    selector: "[render-clone]",
+    callback: function (mutation) {
+        if (
+            mutation.parentElement &&
+            !mutation.parentElement.hasAttribute("dnd")
+        )
+            return;
+        let delayTimer = debounce.get(mutation);
+        clearTimeout(delayTimer);
+        debounce.delete(mutation.target);
+
+        let renderedNode = renderedNodes.get(mutation.target);
+        if (!renderedNode) return;
+
+        if (!mutation.movedFrom) return;
+        let draggedEl = mutation.target;
+        let draggedFrom = mutation.movedFrom.parentElement;
+        let droppedEl =
+            mutation.target.nextElementSibling ||
+            mutation.target.previousElementSibling;
+        let droppedIn = mutation.parentElement;
+
+        if (!draggedFrom || !droppedIn) return;
+        dndCrud(draggedEl, draggedFrom, droppedEl, droppedIn);
+    }
+});