@cocreate/elements 1.46.0 → 1.48.0

package/src/getDataHandler.js

@@ -3,8 +3,39 @@ import {
     checkValue
 } from "@cocreate/utils";
 
-import { elements, forms, keys } from "./mapRegistry.js";
-import { subscribe } from "./subscribeHandler.js";
+import {
+    elements,
+    forms,
+    keys,
+    elementSubscriptions,
+    subscriptions
+} from "./mapRegistry.js";
+import { getSubscription } from "./subscribeHandler.js";
+import { read, save } from "./crudHandler.js";
+
+const environment = localStorage.getItem("environment");
+
+function registerFormElement(form, element, data) {
+    if (!form || !data?.type) return;
+
+    if (!form.save) form.save = () => save(form);
+    if (!form.getData) form.getData = () => getData(form);
+
+    let formObject = forms.get(form);
+    if (!formObject) {
+        formObject = {
+            elements: new Map(),
+            types: new Map()
+        };
+        forms.set(form, formObject);
+    }
+
+    formObject.elements.set(element, data);
+    if (!formObject.types.has(data.type)) {
+        formObject.types.set(data.type, new Map());
+    }
+    formObject.types.get(data.type).set(element, data);
+}
 
 /**
  * Parses and normalizes HTML attributes from an element into a canonical CRUD data object.
@@ -46,6 +77,13 @@ export function getDataObject(element) {
     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;
 }
@@ -59,7 +97,10 @@ export function getDataObject(element) {
  * @returns {{ string: string, object: Object }}
  */
 export function initDataKey(element, data) {
+    if (!data.database && environment) data.database = environment;
+
     const dataKey = getDataKey(data);
+    const subscription = getSubscription(data);
 
     if (keys.has(dataKey.string)) {
         keys.get(dataKey.string).elements.set(element, "");
@@ -69,34 +110,27 @@ export function initDataKey(element, data) {
             data,
             dataKey
         });
-        subscribe(dataKey, data);
     }
 
-    elements.set(element, dataKey.string);
-
-    if (element.parentElement) {
-        const form = element.closest("form");
-        if (form) {
-            if (!form.save) form.save = () => save(form);
-            if (!form.getData) form.getData = () => getData(form);
-
-            let formObject = forms.get(form);
-            if (formObject) {
-                formObject.elements.set(element, data);
-                if (formObject.types.has(data.type)) {
-                    formObject.types.get(data.type).set(element, data);
-                } else {
-                    formObject.types.set(data.type, new Map([[element, data]]));
-                }
-            } else {
-                forms.set(form, {
-                    elements: new Map([[element, data]]),
-                    types: new Map([[data.type, new Map([[element, data]])]])
-                });
-            }
+    if (subscription) {
+        let subscriptionEntry = subscriptions.get(subscription.string);
+        if (subscriptionEntry) {
+            subscriptionEntry.elements.add(element);
+        } else {
+            subscriptionEntry = {
+                elements: new Set([element]),
+                subscription
+            };
+            subscriptions.set(subscription.string, subscriptionEntry);
         }
+        elementSubscriptions.set(element, subscription.string);
     }
 
+    elements.set(element, dataKey.string);
+
+    const form = element.form || element.closest?.("form");
+    registerFormElement(form, element, data);
+
     if (!element.read) element.read = () => read(element);
     if (!element.save) element.save = () => save(element);
 
@@ -113,6 +147,8 @@ export function initDataKey(element, data) {
  */
 export function getDataKey(data) {
     const dataKey = {};
+    if (!data.database && environment) data.database = environment;
+
     const attributes = [
         "host",
         "organization_id",
@@ -126,13 +162,13 @@ export function getDataKey(data) {
         "object",
         "key",
         "updateKey",
-        "$filter",
+        "filter",
         "upsert",
         "namespace",
         "room",
         "broadcast",
         "broadcastSender",
-        "broadcastBrowser"
+        "broadcastClient"
     ];
 
     for (const attribute of attributes) {
@@ -193,7 +229,7 @@ export function getDataKeys(data) {
         "array",
         "index",
         "object",
-        "$filter"
+        "filter"
     ];
 
     for (const [keyString, sortedKey] of keys.entries()) {
@@ -201,8 +237,8 @@ export function getDataKeys(data) {
 
         for (const key of targetKeys) {
             if (
-                !data.$filter &&
-                key === "$filter" &&
+                !data.filter &&
+                key === "filter" &&
                 sortedKey.data.hasOwnProperty(key)
             ) {
                 hasMatch = true;
@@ -211,25 +247,28 @@ export function getDataKeys(data) {
                     hasMatch = false;
                     break;
                 }
+
+                // Filtered object elements watch a collection query, not one
+                // specific object. Creates and updates contain the affected
+                // object(s), so their object shape will not match the empty
+                // object scope used when the filtered element was registered.
+                if (key === "object" && sortedKey.data.filter) continue;
+
                 if (
                     Array.isArray(sortedKey.data[key]) &&
                     Array.isArray(data[key])
                 ) {
-                    if (key === "object" && sortedKey.data.$filter) {
-                        hasMatch = true;
-                    } else {
-                        const matches = sortedKey.data[key].some((value) => {
-                            if (key === "object") {
-                                return data[key].some((obj) => obj._id === value._id);
-                            } else {
-                                return data[key].includes(value);
-                            }
-                        });
-
-                        if (!matches) {
-                            hasMatch = false;
-                            break;
+                    const matches = sortedKey.data[key].some((value) => {
+                        if (key === "object") {
+                            return data[key].some((obj) => obj._id === value._id);
+                        } else {
+                            return data[key].includes(value);
                         }
+                    });
+
+                    if (!matches) {
+                        hasMatch = false;
+                        break;
                     }
                 } else if (sortedKey.data[key] !== data[key]) {
                     hasMatch = false;
@@ -264,7 +303,7 @@ function formatPayload(payload, value, element) {
                     } else payload.object = { ...payload.object, ...value };
                 } else payload.object[payload.key] = value;
             }
-            if (payload.isUpsert && payload.$filter)
+            if (payload.isUpsert && payload.filter)
                 payload.method = "object.update";
         } else payload[payload.type] = value;
     } else if (payload[payload.type] && payload.key) {
@@ -352,19 +391,27 @@ function formatPayload(payload, value, element) {
  */
 export async function getData(form) {
     const dataKeys = new Map();
-    const formObject = forms.get(form);
-
-    if (!formObject) {
-        const selector = "[storage], [database], [array], [object]";
-        const elementsInForm = form.querySelectorAll(selector);
-        await init(elementsInForm);
-        return await getData(form);
+    const selector = "[storage], [database], [array], [object]";
+
+    // form.elements includes controls associated through form="id", even when
+    // the controller lives elsewhere in the document.
+    for (const element of Array.from(form.elements || [])) {
+        if (!element.matches(selector) || element.closest("[template]")) continue;
+
+        // A dataKey identifies the document scope and intentionally excludes
+        // the field-level `key`. Reusing the registry entry's data here would
+        // therefore give every control the key of the first registered field.
+        const data = getDataObject(element);
+        registerFormElement(form, element, data);
     }
 
+    const formObject = forms.get(form);
+    if (!formObject) return [];
 
     for (const type of formObject.types.values()) {
         for (const [element, data] of type.entries()) {
             if (
+                element.closest("[template]") ||
                 !element.hasAttribute("key") ||
                 element.getAttribute("save") === "false"
             ) {
@@ -384,6 +431,17 @@ export async function getData(form) {
             const value = await element.getValue();
             if (value === undefined) continue;
 
+            // A form can expose multiple file sources (for example, device and
+            // camera) while only one source has a pending selection. An unused
+            // file input must not produce an empty object.create operation.
+            if (
+                element.matches('input[type="file"]') &&
+                Array.isArray(value) &&
+                value.length === 0
+            ) {
+                continue;
+            }
+
             const payload = { ...data };
             const dataKey = elements.get(element);
 
@@ -414,4 +472,4 @@ export default {
     getDataKeys,
     getData,
     getDataObject
-};
+};

package/src/index.js

@@ -32,8 +32,9 @@ import { reset } from "./formHandler.js";
 
 import "@cocreate/element-prototype";
 import "./dndHandler.js";
-import "./srcHandler.js";
-import "./valueQuery.js";
+import "./srcHandler.js";
+import "./socketHandler.js";
+import "./valueQuery.js";
 
 import { elements, forms, keys, debounce } from "./mapRegistry.js"
 
@@ -50,4 +51,4 @@ export default {
     debounce,
     getAttributes,
     setDataType
-};
+};

package/src/initHandler.js

@@ -6,8 +6,15 @@ import { getAttributes } from "@cocreate/utils";
 import { initDataKey, getData, getDataObject } from "./getDataHandler.js";
 import { read, save } from "./crudHandler.js";
 import { setData } from "./setDataHandler.js";
-import { elements, forms, keys, debounce } from "./mapRegistry.js";
-import { unsubscribe} from "./subscribeHandler.js";
+import {
+    elements,
+    forms,
+    keys,
+    debounce,
+    elementSubscriptions,
+    subscriptions
+} from "./mapRegistry.js";
+import { unsubscribe } from "./subscribeHandler.js";
 
 const selector = "[storage], [database], [array], [render-json]";
 
@@ -36,36 +43,31 @@ export async function init(element) {
             elements.has(element[i]) ||
             element[i].tagName === "FORM" ||
             element[i].getAttribute("crud") === "false"
-        )
+        ) {
             continue;
+        }
 
         promises.push(
             (async () => {
-                let data = await initElement(element[i]);
-                if (data) {
-                    let dataKey = initDataKey(element[i], data);
-                    return { string: dataKey.string, data };
+                const el = element[i];
+                try {
+                    const data = await initElement(el);
+                    if (data) {
+                        const dataKey = initDataKey(el, data);
+                        // read() already batches elements by dataKey. Schedule each
+                        // ready element without waiting for unrelated async fields.
+                        await read(el, data, dataKey);
+                    }
+                } catch (error) {
+                    // Allow initialization to be retried if filter setup failed.
+                    if (elements.get(el) === "") elements.delete(el);
+                    console.error("[CoCreateElements] Failed to initialize element:", el, error);
                 }
             })()
         );
     }
 
-    let results = await Promise.all(promises);
-    let dataObjects = new Map();
-
-    for (let res of results) {
-        if (res) dataObjects.set(res.string, res.data);
-    }
-
-    if (dataObjects && dataObjects.size > 0) {
-        for (let key of dataObjects.keys()) {
-            let keyEntry = keys.get(key);
-            if (keyEntry) {
-                let { data, elements: mappedElements } = keyEntry;
-                read(Array.from(mappedElements.keys()), data, { string: key });
-            }
-        }
-    }
+    await Promise.all(promises);
 }
 
 /**
@@ -76,14 +78,17 @@ export async function init(element) {
  */
 export async function initElement(el) {
     let data = getDataObject(el);
-    if (!data || !data.type) return;
+    if (!data || !data.type) {
+        return;
+    }
 
     if (
         data.object &&
         data.object !== "pending" &&
         !/^[0-9a-fA-F]{24}$/.test(data.object)
-    )
+    ) {
         return;
+    }
 
     if (!elements.has(el)) {
         elements.set(el, "");
@@ -124,10 +129,10 @@ export async function initElement(el) {
     await filter.init(el);
 
     if (el.getFilter) {
-        data.$filter = await el.getFilter();
+        data.filter = await el.getFilter();
 
         el.setFilter = (filter) => {
-            data.$filter = filter;
+            data.filter = filter;
             el.hasRead = false;
             read(el, data);
         };
@@ -160,16 +165,13 @@ export async function remove(element) {
 
             form = form.elements;
             for (let formEl of form.keys()) {
+                removeSubscription(formEl);
                 let key = elements.get(formEl);
                 if (key) {
                     let keyEntry = keys.get(key);
                     if (keyEntry) {
                         keyEntry.elements.delete(formEl);
-                        if (!keyEntry.elements.size) {
-                            // Last element watching this key was removed -> trigger socket unsubscribe
-                            unsubscribe(keyEntry.dataKey, keyEntry.data);
-                            keys.delete(key);
-                        }
+                        if (!keyEntry.elements.size) keys.delete(key);
                     }
                     elements.delete(formEl);
                 }
@@ -180,15 +182,13 @@ export async function remove(element) {
                 let keyEntry = keys.get(key);
                 if (keyEntry) {
                     keyEntry.elements.delete(el);
-                    if (!keyEntry.elements.size) {
-                        unsubscribe(keyEntry.dataKey, keyEntry.data);
-                        keys.delete(key);
-                    }
+                    if (!keyEntry.elements.size) keys.delete(key);
                 }
             }
             elements.delete(el);
             forms.delete(el);
         } else {
+            removeSubscription(el);
             let key = elements.get(el);
             if (key) {
                 if (el.getFilter) filter.filters.delete(el);
@@ -198,11 +198,7 @@ export async function remove(element) {
                     keyEntry.elements.delete(el);
                     elements.delete(el);
 
-                    if (!keyEntry.elements.size) {
-                        // Last element watching this key was removed -> trigger socket unsubscribe
-                        unsubscribe(keyEntry.dataKey, keyEntry.data);
-                        keys.delete(key);
-                    }
+                    if (!keyEntry.elements.size) keys.delete(key);
                 } else {
                     elements.delete(el);
                 }
@@ -220,11 +216,27 @@ export async function remove(element) {
     }
 }
 
+function removeSubscription(element) {
+    const subscription = elementSubscriptions.get(element);
+    if (!subscription) return;
+
+    const subscriptionEntry = subscriptions.get(subscription);
+    if (subscriptionEntry) {
+        subscriptionEntry.elements.delete(element);
+        if (!subscriptionEntry.elements.size) {
+            unsubscribe(subscriptionEntry.subscription);
+            subscriptions.delete(subscription);
+        }
+    }
+
+    elementSubscriptions.delete(element);
+}
+
 /**
  * Initializes global CRUD socket response listeners.
  */
 export function initSocket() {
-    const type = ["storage", "database", "array", "index", "object", "filter"];
+    const type = ["storage", "database", "array", "index", "object"];
     const method = ["create", "update", "delete"];
 
     for (let i = 0; i < type.length; i++) {
@@ -233,9 +245,11 @@ export function initSocket() {
 
             CRUD.listen(action, function (data) {
                 if (
-                    data.resolved &&
+                    data.key &&
+                    !data.updateDB &&
                     data.status === "received" &&
-                    CRUD.socket.clientId === data.clientId
+                    !data.method.includes(".delete") &&
+                    CRUD.socket.frameId === data.frameId
                 )
                     return;
                 if (data.rendered) return;
@@ -253,6 +267,7 @@ Observer.init({
     types: ["addedNodes"],
     selector: selector,
     callback: function (mutation) {
+        if (mutation.move) return;
         init([mutation.target]);
     }
 });
@@ -262,7 +277,7 @@ Observer.init({
     types: ["removedNodes"],
     selector: selector,
     callback: function (mutation) {
-        if (mutation.target.hasAttribute("render-clone")) return;
+        if (mutation.move) return;
         remove(mutation.target);
     }
 });
@@ -273,6 +288,8 @@ Observer.init({
     attributeFilter: [
         "organization_id",
         "host",
+        "namespace",
+        "room",
         "storage",
         "database",
         "array",
@@ -290,6 +307,39 @@ Observer.init({
     }
 });
 
+Observer.init({
+    name: "CoCreateElementsReadAttribute",
+    types: ["attributes"],
+    attributeFilter: ["read"],
+    selector,
+    callback: async function (mutation) {
+        const el = mutation.target;
+        const currentValue = el.getAttribute("read");
+        if (currentValue === mutation.oldValue) return;
+
+        if (currentValue === "false") {
+            el.hasRead = false;
+            for (const [key, pending] of debounce) {
+                pending.elements?.delete(el);
+                if (pending.elements && !pending.elements.size) {
+                    clearTimeout(pending.timer);
+                    debounce.delete(key);
+                }
+            }
+            return;
+        }
+
+        if (!elements.has(el)) {
+            await init([el]);
+        } else if (el.getFilter && el.setFilter) {
+            el.setFilter(await el.getFilter());
+        } else {
+            el.hasRead = false;
+            await read(el);
+        }
+    }
+});
+
 init();
 
-export default { init, initElement, initSocket, remove };
+export default { init, initElement, initSocket, remove };

package/src/mapRegistry.js

@@ -2,5 +2,14 @@ export const elements = new WeakMap();
 export const forms = new WeakMap();
 export const keys = new Map();
 export const debounce = new Map();
+export const elementSubscriptions = new WeakMap();
+export const subscriptions = new Map();
 
-export default { elements, forms, keys, debounce}
+export default {
+    elements,
+    forms,
+    keys,
+    debounce,
+    elementSubscriptions,
+    subscriptions
+}