@cocreate/elements 1.46.0 → 1.48.0

package/src/socketHandler.js

@@ -0,0 +1,328 @@
+import Actions from "@cocreate/actions";
+import Observer from "@cocreate/observer";
+import Socket from "@cocreate/socket-client";
+import { dotNotationToObject, getValueFromObject, queryData, uuid } from "@cocreate/utils";
+
+const socketOnSelector = "[socket-on]";
+const socketOnElements = new WeakMap();
+const socketOnListeners = new Map();
+const socketStatusSelector = "[socket-status]";
+const socketStatusElements = new Set();
+let socketStatusListenersInitialized = false;
+
+function getSocketScope(element, form) {
+    const scopedElement = element?.closest("[socket]");
+    if (scopedElement && scopedElement !== element) return scopedElement;
+    return form || scopedElement || element;
+}
+
+function getSocketFields(scope, element) {
+    if (!scope) return element ? [element] : [];
+
+    const fields = [];
+    if (scope.matches?.("[socket-key], [send]")) fields.push(scope);
+    fields.push(...scope.querySelectorAll?.("[socket-key], [send]") || []);
+
+    return fields.filter((field) => {
+        if (field.closest("[template]")) return false;
+        const key = field.getAttribute("socket-key") || field.getAttribute("send");
+        if (!key) return false;
+
+        // Keep nested socket scopes independent, just like API endpoint groups.
+        const fieldScope = field.closest("[socket]");
+        return !fieldScope || fieldScope === scope;
+    });
+}
+
+async function getData({ element, form, scope }) {
+    const fields = getSocketFields(scope, element);
+    const flatData = {};
+
+    for (const field of fields) {
+        const key = field.getAttribute("socket-key") || field.getAttribute("send");
+        if (!key || typeof field.getValue !== "function") continue;
+        flatData[key] = await field.getValue();
+    }
+
+    return dotNotationToObject(flatData);
+}
+
+function dispatchSocketError(element, form, error) {
+    element?.dispatchEvent?.(
+        new CustomEvent("socketerror", {
+            bubbles: true,
+            detail: { error, element, form }
+        })
+    );
+}
+
+function getResponseError(response) {
+    if (!response?.error && response?.success !== false && response?.ai?.status !== "error") return null;
+    return new Error(
+        response.ai?.message || response.error || "Socket request failed."
+    );
+}
+
+async function send({ element, form, continue: next, abort }) {
+    const scope = getSocketScope(element, form);
+    const method = scope?.getAttribute?.("socket") || element?.getAttribute?.("socket");
+    const checkbox = element?.matches?.('input[type="checkbox"]') ? element : null;
+    const previousChecked = checkbox ? !checkbox.checked : null;
+    const wasDisabled = checkbox?.disabled;
+    if (checkbox) checkbox.disabled = true;
+
+    try {
+        const data = await getData({ element, form, scope });
+        const request = { ...data };
+        if (method) request.method = method;
+        if (!request.uuid) request.uuid = uuid();
+        const isAIChat = request.method === "ai.chat";
+        if (isAIChat) {
+            console.info("CoCreate AI socket request", {
+                uuid: request.uuid,
+                conversation_id: request.ai?.conversation_id,
+                user_message_id: request.ai?.user_message_id
+            });
+        }
+
+        const response = await Socket.send(request);
+        if (response?.uuid !== request.uuid) {
+            throw new Error("Socket response UUID did not match the request.");
+        }
+
+        if (isAIChat) {
+            console.info("CoCreate AI socket response", {
+                uuid: request.uuid,
+                response_uuid: response.uuid,
+                status: response.ai?.status || response.status,
+                user_message_id: response.ai?.user_message_id
+            });
+        }
+        const responseError = getResponseError(response);
+        if (responseError) {
+            if (checkbox) checkbox.checked = previousChecked;
+            dispatchSocketError(element, form, responseError);
+            abort?.();
+            return;
+        }
+        next?.();
+    } catch (error) {
+        if (checkbox) checkbox.checked = previousChecked;
+        dispatchSocketError(element, form, error);
+        abort?.();
+    } finally {
+        if (checkbox) checkbox.disabled = wasDisabled;
+    }
+}
+
+function parseSocketMatches(element) {
+    const value = element.getAttribute("socket-on-matches");
+    if (!value) return {};
+
+    try {
+        const matches = JSON.parse(value);
+        if (!matches || typeof matches !== "object" || Array.isArray(matches)) {
+            return null;
+        }
+        return matches;
+    } catch (error) {
+        console.warn("CoCreate: socket-on-matches must be a JSON object.", error);
+        return null;
+    }
+}
+
+function normalizeSocketMatches(query, prefix = "") {
+    const normalized = {};
+    const logicalOperators = new Set(["$and", "$or", "$nor"]);
+
+    for (const [key, value] of Object.entries(query)) {
+        if (!prefix && logicalOperators.has(key)) {
+            normalized[key] = Array.isArray(value)
+                ? value.map((entry) => normalizeSocketMatches(entry))
+                : value;
+            continue;
+        }
+
+        const path = prefix ? `${prefix}.${key}` : key;
+        if (value && typeof value === "object" && !Array.isArray(value)) {
+            const properties = Object.keys(value);
+            if (properties.some((property) => property.startsWith("$"))) {
+                normalized[path] = value;
+            } else {
+                Object.assign(normalized, normalizeSocketMatches(value, path));
+            }
+        } else {
+            normalized[path] = value;
+        }
+    }
+
+    return normalized;
+}
+
+function matchesSocketMessage(element, data) {
+    const matches = parseSocketMatches(element);
+    if (!matches) return false;
+    try {
+        return queryData(data, normalizeSocketMatches(matches));
+    } catch (error) {
+        console.warn("CoCreate: unable to evaluate socket-on-matches query.", error);
+        return false;
+    }
+}
+
+async function setSocketOnValue(element, data) {
+    if (!element.isConnected || !matchesSocketMessage(element, data)) return;
+    const key = element.getAttribute("socket-on-key");
+    if (!key || typeof element.setValue !== "function") return;
+
+    const value = getValueFromObject(data, key);
+    if (value === undefined) return;
+    if (typeof element.renderValue === "function") {
+        await element.renderValue({ object: value });
+        return;
+    }
+    await element.setValue(value);
+}
+
+function setSocketStatus(element, status) {
+    if (!element.isConnected) return;
+    const label = element.getAttribute(`socket-status-${status}`);
+    if (label) element.textContent = label;
+    element.classList.toggle("connected", status === "connected");
+    element.classList.toggle("disconnected", status === "disconnected");
+    element.classList.remove("error");
+}
+
+function registerSocketStatus(element) {
+    if (!element?.matches?.(socketStatusSelector)) return;
+    socketStatusElements.add(element);
+    if (!socketStatusListenersInitialized) {
+        Socket.listen("connect", () => {
+            for (const target of socketStatusElements) {
+                setSocketStatus(target, "connected");
+            }
+        });
+        Socket.listen("disconnect", () => {
+            for (const target of socketStatusElements) {
+                setSocketStatus(target, "disconnected");
+            }
+        });
+        socketStatusListenersInitialized = true;
+    }
+    if (Socket.connected) setSocketStatus(element, "connected");
+}
+
+function initializeSocketStatus(root = document) {
+    if (root.matches?.(socketStatusSelector)) registerSocketStatus(root);
+    root.querySelectorAll?.(socketStatusSelector).forEach(registerSocketStatus);
+}
+
+function removeSocketStatus(root) {
+    if (root.matches?.(socketStatusSelector)) socketStatusElements.delete(root);
+    root.querySelectorAll?.(socketStatusSelector).forEach(element => {
+        socketStatusElements.delete(element);
+    });
+}
+
+function registerSocketOn(element) {
+    if (!element?.matches?.(socketOnSelector)) return;
+
+    const previousMethod = socketOnElements.get(element);
+    const method = element.getAttribute("socket-on")?.trim();
+    if (previousMethod && previousMethod !== method) {
+        socketOnListeners.get(previousMethod)?.elements.delete(element);
+        socketOnElements.delete(element);
+    }
+    if (!method || socketOnElements.has(element)) return;
+
+    let listener = socketOnListeners.get(method);
+    if (!listener) {
+        listener = { elements: new Set() };
+        listener.callback = (data) => {
+            for (const target of listener.elements) {
+                if (target.getAttribute("socket-on") !== method) continue;
+                setSocketOnValue(target, data).catch((error) => {
+                    console.error("CoCreate: unable to set socket listener value.", error);
+                });
+            }
+        };
+        socketOnListeners.set(method, listener);
+        Socket.listen(method, listener.callback);
+    }
+
+    listener.elements.add(element);
+    socketOnElements.set(element, method);
+}
+
+function initializeSocketOn(root = document) {
+    if (root.matches?.(socketOnSelector)) registerSocketOn(root);
+    root.querySelectorAll?.(socketOnSelector).forEach(registerSocketOn);
+}
+
+function removeSocketOn(root) {
+    const elements = [];
+    if (root.matches?.(socketOnSelector)) elements.push(root);
+    elements.push(...root.querySelectorAll?.(socketOnSelector) || []);
+    for (const element of elements) {
+        const method = socketOnElements.get(element);
+        if (method) socketOnListeners.get(method)?.elements.delete(element);
+        socketOnElements.delete(element);
+    }
+}
+
+Actions.init({ name: "send", callback: send });
+
+initializeSocketOn();
+initializeSocketStatus();
+
+Observer.init({
+    name: "CoCreateElementsSocketOnAdded",
+    types: ["addedNodes"],
+    selector: socketOnSelector,
+    callback: (mutation) => initializeSocketOn(mutation.target)
+});
+
+Observer.init({
+    name: "CoCreateElementsSocketOnRemoved",
+    types: ["removedNodes"],
+    selector: socketOnSelector,
+    callback: (mutation) => removeSocketOn(mutation.target)
+});
+
+Observer.init({
+    name: "CoCreateElementsSocketOnAttribute",
+    types: ["attributes"],
+    attributeFilter: ["socket-on"],
+    selector: socketOnSelector,
+    callback: (mutation) => registerSocketOn(mutation.target)
+});
+
+Observer.init({
+    name: "CoCreateElementsSocketStatusAdded",
+    types: ["addedNodes"],
+    selector: socketStatusSelector,
+    callback: (mutation) => initializeSocketStatus(mutation.target)
+});
+
+Observer.init({
+    name: "CoCreateElementsSocketStatusRemoved",
+    types: ["removedNodes"],
+    selector: socketStatusSelector,
+    callback: (mutation) => removeSocketStatus(mutation.target)
+});
+
+export { getData as getSocketData, send as sendSocketMessage };
+export {
+    initializeSocketOn,
+    registerSocketOn,
+    removeSocketOn,
+    setSocketOnValue
+};
+export default {
+    getData,
+    initializeSocketOn,
+    registerSocketOn,
+    removeSocketOn,
+    send,
+    setSocketOnValue
+};

package/src/srcHandler.js

@@ -1,8 +1,18 @@
 import observer from "@cocreate/observer";
 import { getRelativePath, ObjectId } from "@cocreate/utils";
 
-const selector =
-    "[src]:not(img, video, audio, script, input, iframe, frame, link, source), [source], [stream]";
+const sourceTagNames = new Set([
+    "IMG",
+    "VIDEO",
+    "AUDIO",
+    "SCRIPT",
+    "INPUT",
+    "IFRAME",
+    "FRAME",
+    "LINK",
+    "SOURCE"
+]);
+const selector = "[src], [source], [stream]";
 
 const initializing = new WeakMap();
 
@@ -14,9 +24,19 @@ const initializing = new WeakMap();
  */
 function isSameOrigin(urlStr) {
     try {
-        // Resolve the URL against the current document's origin.
-        const url = new URL(urlStr, window.location.origin);
-        return url.origin === window.location.origin;
+        let origin = window.location.origin;
+
+        // Sandboxed srcdoc/about:blank documents have an opaque URL even when
+        // same-origin access was explicitly granted. In that case, parent
+        // access succeeds only when the browser considers the frame trusted.
+        if (origin === "null" && window.parent !== window) {
+            origin = window.parent.location.origin;
+        }
+
+        if (!origin || origin === "null") return false;
+
+        const url = new URL(urlStr, origin);
+        return url.origin === origin;
     } catch (err) {
         console.error("Invalid URL format:", urlStr, err);
         return false;
@@ -24,6 +44,8 @@ function isSameOrigin(urlStr) {
 }
 
 function init(elements) {
+    if (elements?.tagName && sourceTagNames.has(elements.tagName)) return;
+
     if (elements && !Array.isArray(elements)) elements = [elements];
 
     if (!elements) elements = document.querySelectorAll(selector);
@@ -33,6 +55,8 @@ function init(elements) {
 
 async function initElements(elements) {
     for (let element of elements) {
+        if (sourceTagNames.has(element.tagName)) continue;
+
         let src =
             element.getAttribute("src") ||
             element.getAttribute("source") ||
@@ -41,27 +65,45 @@ async function initElements(elements) {
         if (!src || /{{\s*([\w\W]+)\s*}}/g.test(src)) continue;
 
         let initialize = initializing.get(element);
+
+        if (element.hasAttribute("rendered")) {
+            element.removeAttribute("rendered");
+            initializing.set(element, { src });
+            continue
+        }
         if (initialize && initialize.src === src) continue;
 
-        initializing.set(element, { src });
+
+        const request = { src };
+        initializing.set(element, request);
+        const isCurrentRequest = () =>
+            initializing.get(element) === request &&
+            (element.getAttribute("src") ||
+                element.getAttribute("source") ||
+                element.getAttribute("stream")) === src;
         try {
             // --- SECURITY FIX: Conditional Sensitive Headers ---
             // Only attach the local state header if fetching from the same origin.
             let headers = {};
             if (isSameOrigin(src)) {
-                let state = localStorage.getItem("state");
+                let state = sessionStorage.getItem("state");
                 if (state) {
                     headers["X-State"] = state;
                 }
             }
 
             let response = await fetch(src, { headers });
+            if (!isCurrentRequest()) continue;
 
             if (response.status === 404 || response.status === 403) {
                 element.setAttribute("error", response.status);
                 continue;
             }
 
+            if (response.ok && ["304", "403", "404"].includes(element.getAttribute("error"))) {
+                element.removeAttribute("error");
+            }
+
             if (element.tagName === "AUDIO" || element.tagName === "VIDEO") {
                 // Media streams can safely load cross-origin without risk of DOM-based XSS
                 initMediaSource(element, src);
@@ -74,24 +116,22 @@ async function initElements(elements) {
                     continue;
                 }
 
-                if (element.hasAttribute("rendered")) {
-                    element.removeAttribute("rendered");
-                }
                 let text = await response.text();
+                if (!isCurrentRequest()) continue;
                 if (text) {
-                    let path = "";
-                    let pathElement = element.closest("[path]");
-                    if (pathElement) {
-                        path =
-                            pathElement.getAttribute("path") ||
-                            getRelativePath();
-                    } else {
-                        path = getRelativePath();
-                    }
-                    // Replace $relativePath in the fetched text
-                    if (path) {
-                        text = text.replaceAll(/\$relativePath\/?/g, path);
-                    }
+                    // let path = "";
+                    // let pathElement = element.closest("[path]");
+                    // if (pathElement) {
+                    //     path =
+                    //         pathElement.getAttribute("path") ||
+                    //         getRelativePath();
+                    // } else {
+                    //     path = getRelativePath();
+                    // }
+                    // // Replace $relativePath in the fetched text
+                    // if (path) {
+                    //     text = text.replaceAll(/\$relativePath\/?/g, path);
+                    // }
                     // Replace ObjectId() with a new ObjectId
                     text = text.replaceAll("ObjectId()", () => {
                         return ObjectId().toString();
@@ -278,8 +318,9 @@ function base64ToArrayBuffer(base64) {
 observer.init({
     name: "CoCreateSrc",
     types: ["addedNodes"],
-    selector: selector,
+    selector: "[src], [source], [stream]",
     callback: function (mutation) {
+        if (mutation.move) return;
         init(mutation.target);
     }
 });
@@ -300,15 +341,10 @@ observer.init({
     name: "CoCreateSrcAttributes",
     types: ["attributes"],
     attributeFilter: ["src"],
-    selector: selector,
+    selector: "[src], [source], [stream]",
     callback: function (mutation) {
-        if (
-            mutation.oldValue !==
-            mutation.target.getAttribute(mutation.attributeName)
-        ) {
-            init(mutation.target);
-        }
+        init(mutation.target);
     }
 });
 
-init();
+init();

package/src/subscribeHandler.js

@@ -2,102 +2,102 @@ import socket from "@cocreate/socket-client";
 
 /**
  * Canonical scope attributes included in socket server subscription channel keys.
- * Excludes field-level "key" and "$filter" so document and collection channels remain cohesive.
+ * Excludes field-level "key" and "filter" so document and collection channels remain cohesive.
  */
 const SUBSCRIPTION_ATTRIBUTES = [
-    "host",
-    "organization_id",
+    "namespace",
+    "room",
     "storage",
     "database",
     "array",
-    "index",
     "object"
 ];
 
-/**
- * Derives all target subscription channel keys for write operations (create, update, delete).
- * Returns an array containing both the specific document scope key (with ID) 
- * and the generic scope key (without ID) to notify both single-item and list subscribers.
- * 
- * @param {Object} dataKey - Client dataKey or CRUD payload object
- * @returns {string[]} Array of JSON-stringified subscription key channel strings
- */
-export function deriveSubscriptionKeys(dataKey) {
-    if (!dataKey) return [];
-    const rawObj = dataKey.object || dataKey;
-
-    const baseSubObj = {};
+export function getSubscription(data) {
+    const object = {};
+
+    for (const attribute of SUBSCRIPTION_ATTRIBUTES) {
+        let value = data[attribute];
+
+        if (attribute === "object") {
+            if (Array.isArray(value)) {
+                value = value
+                    .map(item => typeof item === "object" ? item?._id : item)
+                    .filter(Boolean)
+                    .sort();
+            } else if (typeof value === "object" && value !== null) {
+                value = value._id;
+            }
+        } else if (Array.isArray(value)) {
+            value = [...value].sort();
+        }
 
-    for (const attr of SUBSCRIPTION_ATTRIBUTES) {
-        const value = rawObj[attr];
         if (value !== undefined && value !== null && value !== "") {
-            baseSubObj[attr] = value;
+            object[attribute] = value;
         }
     }
 
-    const keysSet = new Set();
-
-    // 1. Specific Document Key (includes exact object ID if present)
-    const sortedSpecific = Object.fromEntries(
-        Object.entries(baseSubObj).sort(([a], [b]) => a.localeCompare(b))
+    const normalizedObject = Object.fromEntries(
+        Object.entries(object).sort(([a], [b]) => a.localeCompare(b))
     );
-    keysSet.add(JSON.stringify(sortedSpecific));
-
-    // 2. Generic Scope Key (targets list component subscribers watching the collection)
-    if (baseSubObj.object) {
-        const genericSubObj = { ...baseSubObj };
-        genericSubObj.object = []; // Generalize object scope
 
-        const sortedGeneric = Object.fromEntries(
-            Object.entries(genericSubObj).sort(([a], [b]) => a.localeCompare(b))
-        );
-        keysSet.add(JSON.stringify(sortedGeneric));
-    }
+    if (normalizedObject.object && !normalizedObject.array) return;
 
-    return Array.from(keysSet);
+    return {
+        string: JSON.stringify(normalizedObject),
+        object: normalizedObject
+    };
 }
 
 /**
- * Sends a subscription payload to the socket server for a registered dataKey.
- * 
- * @param {Object} dataKey - Generated dataKey object { string, object }
- * @param {Object} [data] - Optional metadata or payload overrides
- * @returns {Object|undefined} Payload sent to the socket
+ * Derives all target subscription channel keys for write operations (create, update, delete).
+ * Returns an array containing both the specific document scope key (with ID)
+ * and the generic scope key (without ID) to notify both single-item and list subscribers.
+ *
+ * @param {Object} data - CRUD data object
+ * @returns {string[]} Array of JSON-stringified subscription key channel strings
  */
-export function subscribe(dataKey, data = {}) {
-    if (!dataKey || !dataKey.string) return;
-
-    const payload = {
-        method: "subscribe",
-        key: dataKey.string,
-        subscriptionKeys: deriveSubscriptionKeys(dataKey.object || dataKey),
-        ...dataKey.object,
-        ...data
+export function deriveSubscriptionKeys(data) {
+    if (!data) return [];
+    const subscription = getSubscription(data);
+    if (!subscription) return [];
+    const baseSubObj = { ...subscription.object };
+    const objects = Array.isArray(baseSubObj.object)
+        ? baseSubObj.object
+        : baseSubObj.object
+            ? [baseSubObj.object]
+            : [];
+    delete baseSubObj.object;
+    const keysSet = new Set();
+    const addKey = (scope) => {
+        const sortedScope = Object.fromEntries(
+            Object.entries(scope).sort(([a], [b]) => a.localeCompare(b))
+        );
+        keysSet.add(JSON.stringify(sortedScope));
     };
 
-    if (socket && typeof socket.send === "function") {
-        socket.send(payload);
-    }
+    for (const object of objects)
+        addKey({ ...baseSubObj, object });
 
-    return payload;
+    // Collection subscribers use the same scope with the object omitted.
+    addKey(baseSubObj);
+
+    return Array.from(keysSet);
 }
 
 /**
  * Sends an unsubscription payload to the socket server when an element scope is unmounted.
- * 
+ *
  * @param {Object} dataKey - Generated dataKey object { string, object }
  * @param {Object} [data] - Optional metadata or payload overrides
  * @returns {Object|undefined} Payload sent to the socket
  */
-export function unsubscribe(dataKey, data = {}) {
-    if (!dataKey || !dataKey.string) return;
+export function unsubscribe(subscription) {
+    if (!subscription || !subscription.string) return;
 
     const payload = {
         method: "unsubscribe",
-        key: dataKey.string,
-        subscriptionKeys: deriveSubscriptionKeys(dataKey.object || dataKey),
-        ...dataKey.object,
-        ...data
+        subscription: subscription.string
     };
 
     if (socket && typeof socket.send === "function") {
@@ -108,7 +108,7 @@ export function unsubscribe(dataKey, data = {}) {
 }
 
 export default {
+    getSubscription,
     deriveSubscriptionKeys,
-    subscribe,
     unsubscribe
-};
+};