@cocreate/elements 1.46.0 → 2.0.0

package/src/index.js

@@ -19,35 +19,469 @@
  * 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 "./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 member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name array
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name database
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name href
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name render-json
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name socket-on
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name socket-status
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name source
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name src
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name storage
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name stream
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name target
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name value-query
+ * @kind member
+ * @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]"
+ * ]
+ * ```
+ */