@ea-lab/reactive-json 0.0.20 → 0.0.22

package/lib/component/reaction/fetchData.jsx

@@ -1,83 +0,0 @@
-import axios from "axios";
-import {evaluateTemplateValue} from "../../engine/TemplateSystem";
-
-/**
- * Fetches data. Similar to submitData, but for GET requests.
- *
- * Will reload the app content if refreshAppOnResponse is true.
- *
- * @param {{args: {refreshAppOnResponse, url}, event, globalDataContext, templateContext}} props Reaction function props.
- */
-export const fetchData = (props) => {
-    // Prevent multiple submits / fetches.
-    const reactionEvent = props?.event;
-
-    // Check in realtime if we are already submitting.
-    // With this system, only 1 submit can be made concurrently for all roots.
-    const body = document.body;
-
-    if (body.dataset.htmlBuilderIsSubmitting === "true") {
-        return;
-    }
-
-    // This will block any attempts to resubmit until receiving the response.
-    body.dataset.htmlBuilderIsSubmitting = "true";
-
-    const currentTarget = reactionEvent.currentTarget;
-
-    if (currentTarget?.dataset) {
-        // Useful for styling.
-        currentTarget.dataset.isSubmitting = "true";
-    }
-
-    const {globalDataContext: _globalDataContext, templateContext} = props;
-
-    // Use the root context when submitting data,
-    // not the maybe-filtered one that the DataFilter component may have edited.
-    // This could be made configurable if ever needed.
-    const globalDataContext = _globalDataContext.getRootContext ? _globalDataContext.getRootContext() : _globalDataContext;
-
-    /**
-     * Tells if the response content will replace the current app content.
-     *
-     * @type {boolean}
-     */
-    const refreshAppOnResponse = props?.args?.refreshAppOnResponse ?? true;
-
-    const url = evaluateTemplateValue({
-        valueToEvaluate: props?.args?.url, globalDataContext, templateContext
-    });
-
-    if (!url) {
-        return;
-    }
-
-    const headers = globalDataContext.headersForData ?? {};
-
-    const {setRawAppData} = globalDataContext;
-
-    axios
-        .get(
-            url,
-            {
-                headers
-            })
-        .then((value) => {
-            if (!refreshAppOnResponse) {
-                return;
-            }
-
-            // This will trigger a complete re-render.
-            setRawAppData(value.data);
-        })
-        .catch((reason) => {
-            console.log("reactionFunction:fetchData : Could not fetch. Reason: " + reason.message);
-        })
-        .finally(() => {
-            delete body.dataset.htmlBuilderIsSubmitting;
-
-            if (currentTarget?.dataset) {
-                delete currentTarget.dataset.isSubmitting;
-            }
-        });
-};

package/lib/component/reaction/moveData.jsx

@@ -1,52 +0,0 @@
-import {dataLocationToPath} from "../../engine/TemplateSystem";
-
-/**
- * Moves data at the specified path.
- *
- * @param {{}} props
- */
-export const moveData = (props) => {
-    const {globalDataContext, templateContext} = props;
-    const {path, target} = props.args;
-
-    if (path === undefined && target !== "currentTemplateData") {
-        return;
-    }
-
-    let dataAbsolutePath;
-
-    if (path) {
-        dataAbsolutePath = dataLocationToPath({
-            currentPath: templateContext.templatePath,
-            dataLocation: path,
-            globalDataContext,
-            templateContext
-        });
-    } else {
-        // Target mode.
-        dataAbsolutePath = templateContext.templatePath;
-
-        // Dev note: could this be interesting for the other mode?
-        let parentLevel = props.args.parentLevel ?? 0;
-
-        while (parentLevel > 0) {
-            --parentLevel;
-
-            // Remove a level from the path.
-            const lastIndex = dataAbsolutePath.lastIndexOf('.');
-
-            if (lastIndex < 1) {
-                // No valid path to remove. Is there a valid use case where we should remove everything?
-                return;
-            }
-
-            dataAbsolutePath = dataAbsolutePath.substring(0, lastIndex);
-        }
-    }
-
-    const {increment} = props.args;
-
-    globalDataContext?.updateData({
-        increment,
-    }, dataAbsolutePath, "move");
-};

package/lib/component/reaction/postMessage.jsx

@@ -1,43 +0,0 @@
-import {evaluateTemplateValueCollection} from "../../engine/TemplateSystem";
-
-/**
- * Posts a message to the specified target.
- *
- * @param {{args: {includeChangedValue, message, messageTarget, on, targetOrigin}, event, globalDataContext, templateContext}} props
- */
-export const postMessage = (props) => {
-    const messageTargets = {
-        parent: window.parent,
-        self: window,
-    };
-
-    const messageTarget = messageTargets[props?.args?.messageTarget ?? "parent"] ?? window;
-
-    // The targetOrigin must match the schema and domain where the message will be sent.
-    // Otherwise, the message will be discarded for security reasons.
-    // When not set, the target will be the current location's origin by default.
-    const messageTargetOrigin = props?.args?.targetOrigin ?? window.location.origin;
-
-    const message_evaluated = evaluateTemplateValueCollection({
-        globalDataContext: props.globalDataContext,
-        templateContext: props.templateContext,
-        valueToEvaluate: props?.args?.message
-    });
-
-    if (props?.args?.on === "change" && typeof message_evaluated === "object" && props?.args?.includeChangedValue && props?.event?.target?.nodeName === "INPUT") {
-        let changedValue;
-
-        switch (props?.event?.target?.type) {
-            case "checkbox":
-                changedValue = props?.event?.target?.checked;
-                break;
-
-            default:
-            // TODO: support other types.
-        }
-
-        message_evaluated["changedValue"] = changedValue;
-    }
-
-    (messageTarget && messageTargetOrigin) && messageTarget.postMessage(message_evaluated, messageTargetOrigin);
-};

package/lib/component/reaction/redirectNow.jsx

@@ -1,17 +0,0 @@
-import {evaluateTemplateValue} from "../../engine/TemplateSystem";
-
-/**
- * Redirects to the specified URL.
- *
- * @param {{}} props
- */
-export const redirectNow = (props) => {
-    const {globalDataContext, templateContext} = props;
-    const {to} = props.args;
-
-    if (!to || typeof to !== "string") {
-        return;
-    }
-
-    window.location.href = evaluateTemplateValue({valueToEvaluate: to, globalDataContext, templateContext});
-};

package/lib/component/reaction/removeData.jsx

@@ -1,48 +0,0 @@
-import {dataLocationToPath} from "../../engine/TemplateSystem";
-
-/**
- * Removes data at the specified path.
- *
- * @param {{}} props
- */
-export const removeData = (props) => {
-    const {globalDataContext, templateContext} = props;
-    const {path, target} = props.args;
-
-    if (path === undefined && target !== "currentTemplateData") {
-        return;
-    }
-
-    let dataAbsolutePath;
-
-    if (path) {
-        dataAbsolutePath = dataLocationToPath({
-            currentPath: templateContext.templatePath,
-            dataLocation: path,
-            globalDataContext,
-            templateContext
-        });
-    } else {
-        // Target mode.
-        dataAbsolutePath = templateContext.templatePath;
-
-        // Dev note: could this be interesting for the other mode?
-        let parentLevel = props.args.parentLevel ?? 0;
-
-        while (parentLevel > 0) {
-            --parentLevel;
-
-            // Remove a level from the path.
-            const lastIndex = dataAbsolutePath.lastIndexOf('.');
-
-            if (lastIndex < 1) {
-                // No valid path to remove. Is there a valid use case where we should remove everything?
-                return;
-            }
-
-            dataAbsolutePath = dataAbsolutePath.substring(0, lastIndex);
-        }
-    }
-
-    globalDataContext?.updateData(undefined, dataAbsolutePath, "remove");
-};

package/lib/component/reaction/setClipboardData.jsx

@@ -1,20 +0,0 @@
-import {evaluateTemplateValue} from "../../engine/TemplateSystem";
-
-/**
- * Copies data to the clipboard.
- *
- * @param {{}} props
- */
-export const setClipboardData = async (props) => {
-    const {globalDataContext, templateContext} = props;
-    const evaluatedValue = evaluateTemplateValue({valueToEvaluate: props?.args?.value, globalDataContext, templateContext});
-
-    if (typeof evaluatedValue === 'string') {
-        try {
-            // Attempt to copy to clipboard.
-            await navigator.clipboard.writeText(evaluatedValue.toString());
-        } catch (error) {
-            console.error('Failed to copy data to the clipboard:', error);
-        }
-    }
-};

package/lib/component/reaction/setData.jsx

@@ -1,23 +0,0 @@
-import {dataLocationToPath, evaluateTemplateValue} from "../../engine/TemplateSystem";
-import {cloneDeep} from "lodash";
-
-/**
- * Sets data at the specified path.
- *
- * @param {{}} props
- */
-export const setData = (props) => {
-    const {globalDataContext, templateContext} = props;
-    const {path, value} = props.args;
-
-    if (path === undefined) {
-        return;
-    }
-
-    const dataAbsolutePath = dataLocationToPath({currentPath: templateContext.templatePath, dataLocation: path, globalDataContext, templateContext});
-
-    const evaluatedValue = evaluateTemplateValue({valueToEvaluate: value, globalDataContext, templateContext});
-
-    // We clone the value to have distinct instances when the value is an object.
-    globalDataContext?.updateData(typeof evaluatedValue !== "object" ? evaluatedValue : cloneDeep(evaluatedValue), dataAbsolutePath);
-};

package/lib/component/reaction/submitData.jsx

@@ -1,136 +0,0 @@
-import axios from "axios";
-import {evaluateTemplateValue} from "../../engine/TemplateSystem";
-
-/**
- * Submits the current state of this app data.
- *
- * Will reload the app content if refreshAppOnResponse is true.
- *
- * @param {{args: {data, httpMethod, refreshAppOnResponse, submitSilently, url}, event, globalDataContext, templateContext}} props Reaction function props.
- */
-export const submitData = (props) => {
-    // Prevent multiple submits.
-    const reactionEvent = props?.event;
-
-    // Check in realtime if we are already submitting.
-    // With this system, only 1 submit can be made concurrently for all roots.
-    const body = document.body;
-
-    if (body.dataset.htmlBuilderIsSubmitting === "true") {
-        return;
-    }
-
-    // This will block any attempts to resubmit until receiving the response.
-    body.dataset.htmlBuilderIsSubmitting = "true";
-
-    if (props?.args?.submitSilently) {
-        // This will prevent CSS from visually disabling the fields if true.
-        body.dataset.htmlBuilderIsSubmittingSilently = "true";
-    } else {
-        delete body.dataset.htmlBuilderIsSubmittingSilently;
-    }
-
-    const currentTarget = reactionEvent?.currentTarget;
-
-    if (currentTarget?.dataset) {
-        // Useful for styling.
-        currentTarget.dataset.isSubmitting = "true";
-    }
-
-    const {globalDataContext: _globalDataContext, templateContext} = props;
-
-    // Use the root context when submitting data,
-    // not the maybe-filtered one that the DataFilter component may have edited.
-    // This could be made configurable if ever needed.
-    const globalDataContext = _globalDataContext.getRootContext ? _globalDataContext.getRootContext() : _globalDataContext;
-
-    /**
-     * Tells if the response content will replace the current app content.
-     *
-     * @type {boolean}
-     */
-    const refreshAppOnResponse = props?.args?.refreshAppOnResponse ?? true;
-
-    const url = evaluateTemplateValue({
-        valueToEvaluate: props?.args?.url, globalDataContext, templateContext
-    });
-
-    if (!url) {
-        return;
-    }
-
-    let payload = {};
-
-    if (props?.args?.hasOwnProperty("data")) {
-        payload = props.args.data;
-
-        // Evaluate the data on the first level.
-        function applyFilter(value, filterFn) {
-            if (Array.isArray(value)) {
-                return value.map(filterFn);
-            } else if (typeof value === 'object' && value !== null) {
-                const entries = Object.entries(value).map(([key, val]) => {
-                    return [key, filterFn(val)];
-                });
-
-                return Object.fromEntries(
-                    entries
-                );
-            } else {
-                return filterFn(value) ? value : null;
-            }
-        }
-
-        payload = applyFilter(payload, (value) => {
-            return evaluateTemplateValue({valueToEvaluate: value, globalDataContext, templateContext})
-        });
-
-        if (globalDataContext.templateData.__state !== undefined) {
-            // Append the special data.__state value.
-            payload.__state = globalDataContext.templateData.__state;
-        }
-    } else {
-        payload.data = globalDataContext.templateData;
-
-        if (globalDataContext.templateData.__state !== undefined) {
-            // Append the special data.__state value.
-            payload.data.__state = globalDataContext.templateData.__state;
-        }
-    }
-
-    const headers = globalDataContext.headersForData ?? {};
-
-    const {setRawAppData} = globalDataContext;
-
-    const config = {
-        method: props?.args?.httpMethod ?? "post",
-        url: url,
-        data: payload,
-    };
-
-    if (headers) {
-        // Override headers only when explicitly set.
-        config.headers = headers;
-    }
-
-    axios(config)
-        .then((value) => {
-            if (!refreshAppOnResponse) {
-                return;
-            }
-
-            // This will trigger a complete re-render.
-            setRawAppData(value.data);
-        })
-        .catch((reason) => {
-            console.log("reactionFunction:submitData : Could not submit. Reason: " + reason.message);
-        })
-        .finally(() => {
-            delete body.dataset.htmlBuilderIsSubmitting;
-            delete body.dataset.htmlBuilderIsSubmittingSilently;
-
-            if (currentTarget?.dataset) {
-                delete currentTarget.dataset.isSubmitting;
-            }
-        });
-};

package/lib/component/reaction/triggerEvent.jsx

@@ -1,62 +0,0 @@
-/**
- * Reaction function which will trigger an event on an element identified by the given selector.
- *
- * @param {{args:{selector, selectorBase, eventName}, event}} props Reaction function props.
- */
-export const triggerEvent = (props) => {
-    const selector = props?.args?.selector;
-
-    if (!selector || typeof selector !== "string" || selector.length === 0) {
-        return;
-    }
-
-    const selectorBase = props?.args?.selectorBase;
-    let selectorBase_real;
-
-    if (typeof selectorBase === "undefined") {
-        selectorBase_real = document;
-    } else if (selectorBase === "currentEventTarget") {
-        selectorBase_real = props?.event?.target;
-    } else {
-        // Find the closest element matching the selectorBase as selector.
-        selectorBase_real = props?.event?.target?.closest(selectorBase);
-    }
-
-    if (!selectorBase_real) {
-        return;
-    }
-
-    const eventName = props?.args?.eventName;
-
-    if (!eventName || typeof eventName !== "string" || eventName.length === 0) {
-        return;
-    }
-
-    const elements = selectorBase_real.querySelectorAll(selector);
-
-    // Prepare the events in a promise system to handle successive synchronous events.
-    // If not doing this, only the last synchronous event will fire.
-    const elements_asArray = Object.entries(elements);
-
-    const consumeSingleEvent = () => {
-        const element = elements_asArray.splice(0, 1)?.[0]?.[1] ?? undefined;
-
-        if (!element) {
-            return;
-        }
-
-        const event = new Event(eventName, {
-            bubbles: true,
-            cancelable: false,
-        });
-
-        element.dispatchEvent(event);
-
-        // We use promises to make multiple clicks on different targets work.
-        // Without this, only the last will receive the event (tested on Firefox).
-        // This is undocumented online.
-        Promise.resolve().then(consumeSingleEvent);
-    };
-
-    consumeSingleEvent();
-};

package/lib/component/utility/formatString.jsx

@@ -1,59 +0,0 @@
-import {evaluateTemplateValue} from "../../engine/TemplateSystem";
-
-/**
- * Pseudo sprintf implementation.
- *
- * Taken from https://stackoverflow.com/a/43718864
- *
- * @licence CC-BY-SA 3.0
- * @author https://stackoverflow.com/users/6314667/7vujy0f0hy and community.
- *
- * @param {string} str The string to format.
- * @param {...string} argv The replacement arguments.
- *
- * @returns {*}
- */
-const sprintf = (str, ...argv) => !argv.length
-    ? str
-    : sprintf(str = str.replace(sprintf.token || "$token", argv.shift()), ...argv);
-
-/**
- * Formats the given string with replacement arguments.
- *
- * @param {{globalDataContext: {}, templateContext: {}}} templateContexts Template contexts.
- * @param {string} toFormat The string to format.
- * @param {...string} argv The replacement arguments.
- */
-export const formatString = ({templateContexts}, toFormat, ...argv) => {
-    const evaluatedArgs = argv.map(
-        (toEvaluate) => {
-            return evaluateTemplateValue({
-                globalDataContext: templateContexts.globalDataContext,
-                templateContext: templateContexts.templateContext,
-                valueToEvaluate: toEvaluate
-            });
-        }
-    )
-    return sprintf(toFormat, ...evaluatedArgs);
-};
-
-/**
- * Formats the given data with replacement arguments if possible.
- *
- * @param {{templateContexts: {globalDataContext: {}, templateContext: {}}}} options Template contexts.
- * @param {*} toFormat The data to format.
- */
-export const maybeFormatString = (options, toFormat) => {
-    if (typeof toFormat === "string") {
-        return toFormat;
-    }
-
-    if (Array.isArray(toFormat)) {
-        const [toFormatReal, ...args] = toFormat;
-
-        return formatString(options, toFormatReal, ...args);
-    }
-
-    // Unsupported data to format.
-    return "";
-};