@cocreate/elements 1.48.0 → 2.0.1

package/src/index.js

@@ -19,36 +19,456 @@
  * Commercial Licensing Information:
  * For commercial use of this software without the copyleft provisions of the AGPLv3,
  * you must obtain a commercial license from CoCreate LLC.
- * For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
+ * For details, visit <https://CoCreateJS.com/licenses/> or contact us at sales@CoCreateJS.com.
  */
 import {
     getAttributes
 } from "@cocreate/utils";
-import { init, initElement, initSocket } from "./initHandler.js";
-import { initDataKey, getDataKey, getDataElements, getDataKeys, getData, getDataObject } from "./getDataHandler.js";
-import { read, save } from "./crudHandler.js";
-import { setDataType, setData } from "./setDataHandler.js";
-import { reset } from "./formHandler.js";
-
-import "@cocreate/element-prototype";
-import "./dndHandler.js";
-import "./srcHandler.js";
-import "./socketHandler.js";
-import "./valueQuery.js";
+import Observer from "@cocreate/observer";
+import { getDataObject } from "./dataObject.js";
+import {
+    socketActionSelector,
+    socketOnSelector,
+    socketStatusSelector
+} from "./socketSelectors.js";
+import { formSelector } from "./formSelectors.js";
+import { valueQuerySelector } from "./valueQuerySelector.js";
 
 import { elements, forms, keys, debounce } from "./mapRegistry.js"
 
+let hrefHandlerLoading;
+let dataHandlerLoading;
+let srcHandlerLoading;
+let socketHandlerLoading;
+let formHandlerLoading;
+let iframeHandlerLoading;
+let valueQueryHandlerLoading;
+const socketSelectors = [socketOnSelector, socketStatusSelector, socketActionSelector].join(", ");
+
+if (document.clickedElement === undefined) {
+    document.clickedElement = null;
+    document.addEventListener("click", event => {
+        document.clickedElement = event.target;
+    });
+}
+
+const hrefSelector = "[href], [target]";
+const dataSelector = "[storage], [database], [array], [render-json]";
+const srcSelector = "img, [src], [source], [stream]";
+
+function loadHrefHandler() {
+    if (!hrefHandlerLoading) {
+        hrefHandlerLoading = import(/* webpackChunkName: "elements-href-handler" */ "./hrefHandler.js")
+            .catch(error => {
+                hrefHandlerLoading = undefined;
+                throw error;
+            });
+    }
+    hrefHandlerLoading.catch(error => console.error("CoCreate: unable to load href handler.", error));
+}
+
+function loadDataHandler() {
+    if (!dataHandlerLoading) {
+        dataHandlerLoading = import(/* webpackChunkName: "elements-data-handler" */ "./dataHandler.js")
+            .catch(error => {
+                dataHandlerLoading = undefined;
+                throw error;
+            });
+    }
+    return dataHandlerLoading;
+}
+
+function initializeDataHandler() {
+    loadDataHandler().catch(error => console.error("CoCreate: unable to load data handler.", error));
+}
+
+function loadSrcHandler() {
+    if (!srcHandlerLoading) {
+        srcHandlerLoading = import(/* webpackChunkName: "elements-src-handler" */ "./srcHandler.js")
+            .catch(error => {
+                srcHandlerLoading = undefined;
+                throw error;
+            });
+    }
+    srcHandlerLoading.catch(error => console.error("CoCreate: unable to load source handler.", error));
+}
+
+function loadIframeHandler() {
+    if (!iframeHandlerLoading) {
+        iframeHandlerLoading = import(/* webpackChunkName: "elements-iframe-handler" */ "./iframeHandler.js")
+            .catch(error => {
+                iframeHandlerLoading = undefined;
+                throw error;
+            });
+    }
+    iframeHandlerLoading.catch(error => console.error("CoCreate: unable to load iframe handler.", error));
+}
+
+function loadValueQueryHandler() {
+    if (!valueQueryHandlerLoading) {
+        valueQueryHandlerLoading = import(/* webpackChunkName: "elements-value-query" */ "./valueQuery.js")
+            .catch(error => {
+                valueQueryHandlerLoading = undefined;
+                throw error;
+            });
+    }
+    valueQueryHandlerLoading.catch(error => console.error("CoCreate: unable to load value query handler.", error));
+}
+
+function loadFormHandler() {
+    if (!formHandlerLoading) {
+        formHandlerLoading = import(/* webpackChunkName: "elements-form-handler" */ "./formHandler.js")
+            .catch(error => {
+                formHandlerLoading = undefined;
+                throw error;
+            });
+    }
+    return formHandlerLoading;
+}
+
+function initializeFormHandler() {
+    loadFormHandler().catch(error => console.error("CoCreate: unable to load form handler.", error));
+}
+
+function usesSocket(element) {
+    if (element.matches(socketOnSelector) || element.matches(socketStatusSelector)) return true;
+    return (element.getAttribute("actions") || "").split(",").some(action =>
+        action.trim().split("(", 1)[0].trim() === "send"
+    );
+}
+
+function loadSocketHandler(element) {
+    if (!usesSocket(element)) return;
+    if (!socketHandlerLoading) {
+        socketHandlerLoading = import(/* webpackChunkName: "elements-socket-handler" */ "./socketHandler.js")
+            .catch(error => {
+                socketHandlerLoading = undefined;
+                throw error;
+            });
+    }
+    socketHandlerLoading.catch(error => {
+        element.dispatchEvent(new CustomEvent("socketerror", {
+            bubbles: true, detail: { error, element }
+        }));
+    });
+}
+
+Observer.init([
+    {
+        name: "CoCreateElementsHrefLoaderAddedNodes",
+        types: ["addedNodes"],
+        selector: hrefSelector,
+        callback: loadHrefHandler
+    },
+    {
+        name: "CoCreateElementsHrefLoaderAttributes",
+        types: ["attributes"],
+        attributeFilter: ["href", "target"],
+        selector: hrefSelector,
+        callback: loadHrefHandler
+    },
+    {
+        name: "CoCreateElementsDataLoaderAddedNodes",
+        types: ["addedNodes"],
+        selector: dataSelector,
+        callback: initializeDataHandler
+    },
+    {
+        name: "CoCreateElementsDataLoaderAttributes",
+        types: ["attributes"],
+        attributeFilter: ["storage", "database", "array", "render-json"],
+        selector: dataSelector,
+        callback: initializeDataHandler
+    },
+    {
+        name: "CoCreateElementsSrcLoaderAddedNodes",
+        types: ["addedNodes"],
+        selector: srcSelector,
+        callback: loadSrcHandler
+    },
+    {
+        name: "CoCreateElementsSrcLoaderAttributes",
+        types: ["attributes"],
+        attributeFilter: ["src", "source", "stream"],
+        selector: srcSelector,
+        callback: loadSrcHandler
+    },
+    {
+        name: "CoCreateElementsActionLoaderAddedNodes",
+        types: ["addedNodes"],
+        selector: "[actions]",
+        callback: mutation => loadActionHandler(mutation.target)
+    },
+    {
+        name: "CoCreateElementsActionLoaderAttributes",
+        types: ["attributes"],
+        attributeFilter: ["actions"],
+        selector: "[actions]",
+        callback: mutation => loadActionHandler(mutation.target)
+    },
+    {
+        name: "CoCreateElementsFormLoader",
+        types: ["addedNodes"],
+        selector: formSelector,
+        callback: initializeFormHandler
+    },
+    {
+        name: "CoCreateElementsSocketLoaderAddedNodes",
+        types: ["addedNodes"],
+        selector: socketSelectors,
+        callback: mutation => loadSocketHandler(mutation.target)
+    },
+    {
+        name: "CoCreateElementsSocketLoaderAttributes",
+        types: ["attributes"],
+        attributeFilter: ["socket-on", "socket-status", "actions"],
+        selector: socketSelectors,
+        callback: mutation => loadSocketHandler(mutation.target)
+    },
+    {
+        name: "CoCreateElementsIframeLoader",
+        types: ["addedNodes"],
+        selector: "iframe",
+        callback: loadIframeHandler
+    },
+    {
+        name: "CoCreateElementsValueQueryLoaderAddedNodes",
+        types: ["addedNodes"],
+        selector: valueQuerySelector,
+        callback: loadValueQueryHandler
+    },
+    {
+        name: "CoCreateElementsValueQueryLoaderAttributes",
+        types: ["attributes"],
+        attributeFilter: ["value-query"],
+        selector: valueQuerySelector,
+        callback: loadValueQueryHandler
+    }
+]);
+
+function loadActionHandler(element) {
+    const actions = (element.getAttribute("actions") || "").split(",");
+    for (const action of actions) {
+        const name = action.trim().split("(", 1)[0].trim();
+        if (name === "save" || name === "delete") initializeDataHandler();
+        if (name === "reset") initializeFormHandler();
+        if (name === "disableHref" || name === "enableHref") loadHrefHandler();
+    }
+}
+
+document.querySelectorAll("[actions]").forEach(loadActionHandler);
+if (document.querySelector(hrefSelector)) loadHrefHandler();
+if (document.querySelector(dataSelector)) initializeDataHandler();
+if (document.querySelector(srcSelector)) loadSrcHandler();
+document.querySelectorAll(socketSelectors).forEach(loadSocketHandler);
+if (document.querySelector(formSelector)) initializeFormHandler();
+if (document.querySelector("iframe")) loadIframeHandler();
+if (document.querySelector(valueQuerySelector)) loadValueQueryHandler();
+
+// Preserve the asynchronous public APIs while loading their implementation on demand.
+const callDataHandler = (name, args) => loadDataHandler().then(module => module[name](...args));
+/**
+ *
+ * @public
+ * @environment client
+ */
+const init = (...args) => callDataHandler("init", args);
+/**
+ *
+ * @public
+ * @environment client
+ */
+const read = (...args) => callDataHandler("read", args);
+/**
+ *
+ * @public
+ * @environment client
+ */
+const save = (...args) => callDataHandler("save", args);
+/**
+ *
+ * @public
+ * @environment client
+ */
+const getData = (...args) => callDataHandler("getData", args);
+/**
+ *
+ * @public
+ * @environment client
+ */
+const setDataType = (...args) => callDataHandler("setDataType", args);
+
+/**
+ *
+ * @public
+ * @environment client
+ */
+export function reset(action) {
+    return loadFormHandler().then(module => module.reset(action));
+}
+
 export default {
     init,
     read,
     save,
     getData,
+    /**
+     *
+ * @public
+ * @environment client
+ */
     getDataObject,
     reset,
+    /**
+     *
+ * @public
+ * @environment client
+ */
     elements,
+    /**
+     *
+ * @public
+ * @environment client
+ */
     keys,
+    /**
+     *
+ * @public
+ * @environment client
+ */
     forms,
+    /**
+     *
+ * @public
+ * @environment client
+ */
     debounce,
+    /**
+     *
+ * @public
+ * @environment client
+ */
     getAttributes,
     setDataType
-};
+};
+
+/**
+ *
+ * @name actions
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name array
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name database
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name href
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name render-json
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name socket-on
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name socket-status
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name source
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name src
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name storage
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name stream
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name target
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name value-query
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ * 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
+ *
+ * @module elements
+ * @environment client
+ */
+
+/**
+ * Declarative selectors recognized by this module.
+ *
+ * @name declarative-selectors
+ * @kind member
+ * @selectors
+ * @environment client
+ * @example
+ * ```json
+ * [
+ *   "[actions]",
+ *   "iframe",
+ *   "[href], [target]",
+ *   "[storage], [database], [array], [render-json]",
+ *   "img, [src], [source], [stream]",
+ *   "[value-query]",
+ *   "form, fieldset",
+ *   "[socket-on]",
+ *   "[socket-status]"
+ * ]
+ * ```
+ */

package/src/setDataHandler.js

@@ -157,11 +157,16 @@ export async function setData(element, data) {
         if (action && ["database", "array", "object", "key"].includes(action))
             continue;
 
-        if (data.array.includes("aiConversations")) {
-            console.log("testing ai conversations");
+        const { key, isRead, isUpdate, isListen, isCrdt } = getAttributes(el);
+        if (key !== undefined && typeof key !== "string") {
+            console.error("[CoCreate elements] Ignoring element with a non-string key", {
+                key,
+                keyType: typeof key,
+                element: el
+            });
+            continue;
         }
 
-        const { key, isRead, isUpdate, isListen, isCrdt } = getAttributes(el);
         const hasRenderController =
             el.hasAttribute("render-query") || el.hasAttribute("render-json");
 

package/src/socketHandler.js

@@ -1,12 +1,12 @@
+import "@cocreate/element-prototype";
 import Actions from "@cocreate/actions";
 import Observer from "@cocreate/observer";
 import Socket from "@cocreate/socket-client";
 import { dotNotationToObject, getValueFromObject, queryData, uuid } from "@cocreate/utils";
+import { socketOnSelector, socketStatusSelector } from "./socketSelectors.js";
 
-const socketOnSelector = "[socket-on]";
 const socketOnElements = new WeakMap();
 const socketOnListeners = new Map();
-const socketStatusSelector = "[socket-status]";
 const socketStatusElements = new Set();
 let socketStatusListenersInitialized = false;
 

package/src/socketSelectors.js

@@ -0,0 +1,3 @@
+export const socketOnSelector = "[socket-on]";
+export const socketStatusSelector = "[socket-status]";
+export const socketActionSelector = "[actions]";

package/src/srcHandler.js

@@ -1,3 +1,4 @@
+import "@cocreate/element-prototype";
 import observer from "@cocreate/observer";
 import { getRelativePath, ObjectId } from "@cocreate/utils";
 

package/src/valueQuery.js

@@ -1,8 +1,7 @@
 import Observer from "@cocreate/observer";
 import "@cocreate/element-prototype";
 import { queryElements } from "@cocreate/utils";
-
-const selector = "[value-query]";
+import { valueQuerySelector } from "./valueQuerySelector.js";
 
 /**
  * Initializes elements with value-* attributes to enable dynamic value retrieval and setting.
@@ -18,7 +17,7 @@ async function init(element) {
 	) {
 		element = [element];
 	} else if (!element) {
-		element = document.querySelectorAll(selector);
+		element = document.querySelectorAll(valueQuerySelector);
 	}
 
 	for (let i = 0; i < element.length; i++) {
@@ -87,7 +86,7 @@ init();
 Observer.init({
 	name: "CoCreateElementsValueAdded",
 	types: ["addedNodes"],
-	selector: selector,
+	selector: valueQuerySelector,
 	callback: function (mutation) {
 		init(mutation.target);
 	}

package/src/valueQuerySelector.js

@@ -0,0 +1 @@
+export const valueQuerySelector = "[value-query]";

package/test/href-handler.test.cjs

@@ -0,0 +1,132 @@
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const test = require('node:test');
+const vm = require('node:vm');
+
+function documentStub() {
+    const listeners = new Set();
+    return {
+        nodeType: 9,
+        addEventListener: (type, callback) => listeners.add(callback),
+        removeEventListener: (type, callback) => listeners.delete(callback),
+        click(target) {
+            const event = { target, prevented: false, preventDefault() { this.prevented = true; } };
+            for (const listener of listeners) listener(event);
+            return event;
+        }
+    };
+}
+
+async function setup() {
+    const document = documentStub(), opened = [], definitions = [];
+    const location = { href: 'https://example.test/' };
+    const actions = { init: entries => definitions.push(...entries), href() { throw new Error('Default href'); } };
+    let targets = [];
+    const stubs = {
+        '@cocreate/actions': { default: actions },
+        '@cocreate/utils': { queryElements: () => targets }
+    };
+    const context = vm.createContext({ document, location, URL, window: { open: (...args) => opened.push(args) } });
+    const module = new vm.SourceTextModule(fs.readFileSync(path.join(__dirname, '../src/hrefHandler.js'), 'utf8'), { context });
+    await module.link(name => {
+        const exports = stubs[name];
+        return new vm.SyntheticModule(Object.keys(exports), function () {
+            for (const [key, value] of Object.entries(exports)) this.setExport(key, value);
+        }, { context });
+    });
+    await module.evaluate();
+    function element(attributes = {}, parent = null) {
+        const node = {
+            ownerDocument: document, parent, children: [],
+            hasAttribute: name => Object.hasOwn(attributes, name),
+            getAttribute: name => attributes[name] ?? null,
+            matches: selector => selector.split(',').some(part => Object.hasOwn(attributes, part.trim().slice(1, -1))),
+            closest(selector) { return this.matches(selector) ? this : parent?.closest(selector) || null; },
+            querySelector(selector) { return this.children.find(child => child.matches(selector)) || null; }
+        };
+        parent?.children.push(node);
+        return node;
+    }
+    return { document, location, opened, actions, definitions, element, module: module.namespace,
+        select: value => { targets = value; } };
+}
+
+test('automatic setup registers actions and exposes only navigation controls', async () => {
+    const f = await setup();
+    assert.deepEqual(Object.keys(f.module).sort(), ['default', 'disableHref', 'enableHref', 'open']);
+    assert.deepEqual(Object.keys(f.module.default).sort(), ['disableHref', 'enableHref', 'open']);
+    for (const name of ['open', 'disableHref', 'enableHref']) {
+        assert.equal(f.module.default[name], f.module[name]);
+    }
+    assert.equal(typeof f.actions.href, 'function');
+    assert.equal(f.document.link.islink, 'true');
+    assert.deepEqual(f.definitions.map(definition => definition.name), ['disableHref', 'enableHref']);
+});
+
+test('delegation handles newly inserted links and preserves window targeting', async () => {
+    const f = await setup();
+    const link = f.element({ href: '/next', target: '_window' });
+    const icon = f.element({}, link);
+    assert.equal(f.document.click(icon).prevented, true);
+    assert.deepEqual(f.opened, [['/next', '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes']]);
+});
+
+test('direct clicks defer action links to the chain href hook', async () => {
+    const f = await setup();
+    const link = f.element({ actions: 'save', href: '/next' });
+    const event = f.document.click(link);
+    assert.equal(event.prevented, false);
+    assert.equal(f.location.href, 'https://example.test/');
+    f.actions.href(link, { event });
+    assert.equal(event.prevented, true);
+    assert.equal(f.location.href, '/next');
+});
+
+test('the chain hook resolves child links and leaves downloads alone', async () => {
+    const f = await setup();
+    const button = f.element({ actions: 'save' });
+    f.element({ href: '/next', target: 'preview' }, button);
+    f.actions.href(button);
+    assert.deepEqual(f.opened, [['/next', 'preview']]);
+    const download = f.element({ href: '/file', download: '' });
+    assert.equal(f.document.click(download).prevented, false);
+    f.actions.href(download);
+    assert.equal(f.location.href, 'https://example.test/');
+});
+
+test('enable and disable actions update document state and complete their chains', async () => {
+    const f = await setup();
+    const button = f.element(), link = f.element({ href: '/next' });
+    let completed = 0;
+    f.definitions[0].callback({ element: button, end() { completed++; } });
+    assert.equal(f.document.click(link).prevented, true);
+    f.actions.href(link);
+    assert.equal(f.location.href, 'https://example.test/');
+    f.definitions[1].callback({ element: button, end() { completed++; } });
+    assert.equal(completed, 2);
+    f.document.click(link);
+    assert.equal(f.location.href, '/next');
+});
+
+test('link-query scopes enable and disable to the selected iframe document', async () => {
+    const f = await setup();
+    const frameDocument = documentStub();
+    f.select([{ contentDocument: frameDocument }]);
+    const button = f.element({ 'link-query': '#preview' });
+    f.module.disableHref(button);
+    assert.equal(frameDocument.link.islink, 'false');
+    assert.equal(f.document.link.islink, 'true');
+    f.module.enableHref(button);
+    assert.equal(frameDocument.link.islink, 'true');
+});
+
+test('applications can replace the href hook after the feature loads', async () => {
+    const f = await setup();
+    const custom = () => {};
+    f.actions.href = custom;
+    const button = f.element();
+    f.module.disableHref(button);
+    f.module.enableHref(button);
+    assert.equal(f.actions.href, custom);
+});