@cocreate/elements 1.46.0 → 2.0.0

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