@ea-lab/reactive-json 0.0.0

package/lib/component/reaction/submitData.jsx

@@ -0,0 +1,136 @@
+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

@@ -0,0 +1,62 @@
+/**
+ * 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

@@ -0,0 +1,59 @@
+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 "";
+};

package/lib/engine/Actions.jsx

@@ -0,0 +1,392 @@
+import {useContext} from "react";
+import GlobalDataContext from "./GlobalDataContext";
+import TemplateContext from "./TemplateContext";
+import {evaluateTemplateValue, isTemplateValue} from "./TemplateSystem";
+
+import HashChangeListener from "../component/action/HashChangeListener";
+import Hide from "../component/action/Hide";
+import MessageListener from "../component/action/MessageListener";
+import Popover from "../component/action/Popover";
+import ReactOnEvent, {reactionFunctions} from "../component/action/ReactOnEvent";
+import Redirect from "../component/action/Redirect";
+import Tooltip from "../component/action/Tooltip";
+import VisuallyHide from "../component/action/VisuallyHide";
+import {isEqual} from "lodash";
+import JSONPath from "jsonpath";
+
+/**
+ * Contains the list of available actions in config.
+ * @type {{}}
+ */
+const actionsToEvaluate = {
+    hide: Hide,
+    popover: Popover,
+    redirect: Redirect,
+    tooltip: Tooltip,
+    visuallyHide: VisuallyHide,
+};
+
+/**
+ * Capitalizes the first letter.
+ *
+ * @param str
+ * @returns {string}
+ */
+const capitalizeFirstLetter = (str) => str && str.charAt(0).toUpperCase() + str.slice(1);
+
+/**
+ * Checks whether the conditions are fulfilled.
+ * @param {{andConditions, containedBy, containedByNot, contains, containsNot, is, isNot, orConditions, when, whenDataCountOf, ">", "<", ">=", "<=", compareAsDates}} condition
+ * @param {object} templateContexts
+ * @param {Map} additionalConditionHandlers
+ * @returns {*}
+ */
+export const isValid = (condition, templateContexts, additionalConditionHandlers) => {
+    const {globalDataContext, templateContext} = templateContexts;
+
+    if (Array.isArray(condition.andConditions)) {
+        return condition.andConditions.reduce(
+            (acc, cur) => {
+                // All sub conditions must be true.
+                return acc && isValid(cur, templateContexts, additionalConditionHandlers);
+            },
+            true
+        );
+    }
+
+    if (Array.isArray(condition.orConditions)) {
+        const orConditions = condition.orConditions;
+
+        for (const condition of orConditions) {
+            if (isValid(condition, templateContexts, additionalConditionHandlers)) {
+                // A single condition is enough to validate.
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    if (condition.when !== undefined && !isTemplateValue(condition.when)) {
+        return false;
+    }
+
+    const evaluateTemplateValueLocal = (toEvaluate) => {
+        return evaluateTemplateValue({
+            globalDataContext: globalDataContext,
+            templateContext: templateContext,
+            valueToEvaluate: toEvaluate,
+        });
+    }
+
+    let valueToCompare;
+
+    if (condition.when === undefined && condition.hasOwnProperty("whenDataCountOf")) {
+        // Select where to count.
+        let countFinalTemplateData;
+
+        switch (condition.inContext) {
+            case "root":
+                countFinalTemplateData = globalDataContext.getRootContext().templateData;
+                break;
+
+            case "template":
+                countFinalTemplateData = templateContext.templateData;
+                break;
+
+            default:
+                countFinalTemplateData = globalDataContext.templateData;
+                break;
+        }
+
+        valueToCompare = JSONPath.query(countFinalTemplateData, condition.whenDataCountOf).length;
+    } else {
+        // Other code may inject additional condition handler which can return the value to compare.
+        valueToCompare = (() => {
+            if (additionalConditionHandlers) {
+                for (const [handlerId, additionalConditionHandler] of additionalConditionHandlers) {
+                    if (condition.hasOwnProperty(handlerId)) {
+                        // This additional condition handler will compute the value to compare.
+                        return additionalConditionHandler({
+                            condition,
+                            templateContexts,
+                            evaluateAgainstTemplates: (value) => {
+                                return evaluateTemplateValueLocal(value);
+                            }
+                        });
+                    }
+                }
+            }
+
+            // Compute using the usual method.
+            return evaluateTemplateValueLocal(condition.when);
+        })();
+    }
+
+    if (condition.hasOwnProperty("isEmpty")) {
+        const maybeInvert = val => condition.isEmpty === "not" ? !val : val;
+
+        if (valueToCompare === null) {
+            return maybeInvert(true);
+        }
+
+        switch (typeof valueToCompare) {
+            case "undefined":
+                return maybeInvert(true);
+
+            case "string":
+                return maybeInvert(valueToCompare.length === 0);
+
+            case "object":
+                return maybeInvert(Object.keys(valueToCompare).length === 0);
+
+            default:
+                return maybeInvert(!valueToCompare);
+        }
+    }
+
+    // This can be useful when two differently formatted dates must be compared.
+    const compareAsDates = condition.compareAsDates;
+
+    if (condition.hasOwnProperty("isNot")) {
+        return maybeDate(compareAsDates, valueToCompare) !== maybeDate(compareAsDates, evaluateTemplateValueLocal(condition.isNot));
+    }
+
+    if (condition.hasOwnProperty("is")) {
+        return maybeDate(compareAsDates, valueToCompare) === maybeDate(compareAsDates, evaluateTemplateValueLocal(condition.is));
+    }
+
+    if (condition.hasOwnProperty("containsNot") || condition.hasOwnProperty("contains")) {
+        // True if containsNot.
+        const invertedMode = condition.hasOwnProperty("containsNot");
+
+        const needleSource = invertedMode ? condition.containsNot : condition.contains;
+
+        const needle = maybeDate(compareAsDates, evaluateTemplateValueLocal(needleSource));
+
+        if (typeof valueToCompare === "string") {
+            // Check as a string. Do a case-insensitive check.
+            if (typeof needle !== "string") {
+                // The types do not match.
+                return invertedMode;
+            }
+
+            const result = valueToCompare.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
+
+            return invertedMode ? !result : result;
+        } else {
+            for (const item of Object.values(valueToCompare)) {
+                if (isEqual(maybeDate(compareAsDates, item), needle)) {
+                    // The needle has been found. When in inverted mode (containsNot), return false.
+                    return !invertedMode;
+                }
+            }
+        }
+
+        // The needle has not been found. When in inverted mode (containsNot), return true.
+        return invertedMode;
+    }
+
+    if (condition.hasOwnProperty("containedByNot") || condition.hasOwnProperty("containedBy")) {
+        // True if containedByNot.
+        const invertedMode = condition.hasOwnProperty("containedByNot");
+
+        const needleSource = invertedMode ? condition.containedByNot : condition.containedBy;
+
+        const container = maybeDate(compareAsDates, evaluateTemplateValueLocal(needleSource));
+
+        if (typeof valueToCompare === "string") {
+            // Check as a string. Do a case-insensitive check.
+            if (typeof container !== "string") {
+                // The types do not match.
+                return invertedMode;
+            }
+
+            const result = container.toLowerCase().indexOf(valueToCompare.toLowerCase()) !== -1;
+
+            return invertedMode ? !result : result;
+        } else {
+            for (const item of Object.values(container)) {
+                if (isEqual(maybeDate(compareAsDates, item), valueToCompare)) {
+                    // The needle has been found. When in inverted mode (containsNot), return false.
+                    return !invertedMode;
+                }
+            }
+        }
+
+        // The needle has not been found. When in inverted mode (containsNot), return true.
+        return invertedMode;
+    }
+
+    if (condition.hasOwnProperty(">")) {
+        return maybeDate(compareAsDates, valueToCompare) > maybeDate(compareAsDates, evaluateTemplateValueLocal(condition[">"]));
+    }
+
+    if (condition.hasOwnProperty(">=")) {
+        return maybeDate(compareAsDates, valueToCompare) >= maybeDate(compareAsDates, evaluateTemplateValueLocal(condition[">="]));
+    }
+
+    if (condition.hasOwnProperty("<")) {
+        return maybeDate(compareAsDates, valueToCompare) < maybeDate(compareAsDates, evaluateTemplateValueLocal(condition["<"]));
+    }
+
+    if (condition.hasOwnProperty("<=")) {
+        return maybeDate(compareAsDates, valueToCompare) <= maybeDate(compareAsDates, evaluateTemplateValueLocal(condition["<="]));
+    }
+
+    // No condition means always valid.
+    return true;
+};
+
+/**
+ * Gets the actions to execute for the current component.
+ * @param {Array} actions
+ * @param {object} templateContexts
+ * @returns {*[]}
+ */
+const getActionsToExecute = (actions, templateContexts) => {
+    const result = [];
+
+    let requiresReactionComponent = false;
+
+    const reactionFunctionProps = {};
+
+    if (!Array.isArray(actions)) {
+        // Not a supported actions structure.
+        // Dev note: we may also allow objects in the future, to allow specific overrides.
+        return result;
+    }
+
+    // The index is useful to build the data path for the components created by the actions.
+    // This is a requirement of the View components.
+    // Dev note: could it be like the components, where we can specify string keys,
+    // thus allowing objects in the actions definitions?
+    for (const [index, item] of actions.entries()) {
+        const what = item?.what ?? undefined;
+
+        if (!what) {
+            continue;
+        }
+
+        const Component = actionsToEvaluate[what];
+        let reactionFunction = undefined;
+
+        if (!Component) {
+            // This is not a component. Maybe it's a reaction function...
+            reactionFunction = reactionFunctions[what] ?? undefined;
+
+            if (!reactionFunction) {
+                // The component is unknown or not registered,
+                // and it's not a reaction function.
+                continue;
+            }
+
+            // This is a reaction function.
+            if (item.on === undefined) {
+                // Reaction functions are called only in response to events.
+                // Dev note: evaluate if we can execute reaction functions on component mount,
+                // with empty "on".
+                continue;
+            }
+
+            if (!isValid(item, templateContexts)) {
+                continue;
+            }
+
+            if (item.on === "message") {
+                // "message" has a special handling. It adds the special MessageListener action component.
+                // This is because the message event can only be listened to on the window object,
+                // so it adds event listeners on the window object (not the current component).
+                result.push({ActionComponent: MessageListener, actionProps: item, actionIndex: index});
+                continue;
+            }
+
+            if (item.on === "hashchange") {
+                // "hashchange" works in the same way than "message": it must be added on the window object.
+                result.push({ActionComponent: HashChangeListener, actionProps: item, actionIndex: index});
+                continue;
+            }
+
+            requiresReactionComponent = true;
+
+            const normalizedEventName = "on" + capitalizeFirstLetter(item.on);
+
+            if (!Array.isArray(reactionFunctionProps[normalizedEventName])) {
+                // Initialize the key.
+                reactionFunctionProps[normalizedEventName] = [];
+            }
+
+            // Append the reaction function definition that will be read
+            // later by the ReactOnEvent action component.
+            reactionFunctionProps[normalizedEventName].push(item);
+
+            // Do not add the ReactOnEvent component yet in the result array.
+            // It will be added at the end of the actions chain.
+            continue;
+        }
+
+        if (!isValid(item, templateContexts)) {
+            continue;
+        }
+
+        result.push({ActionComponent: Component, actionProps: item, actionIndex: index});
+    }
+
+    if (requiresReactionComponent) {
+        // Add the final component for reaction.
+        // It's added at the end because it will collect all definitions
+        // and apply the reaction function properties on the real rendered element.
+        // TODO: evaluate if the _reactOnEvent actionIndex may create issues.
+        result.push({ActionComponent: ReactOnEvent, actionProps: reactionFunctionProps, actionIndex: "_reactOnEvent"});
+    }
+
+    return result;
+};
+
+/**
+ * Maybe converts the given value to a date representation.
+ *
+ * Needed for date comparisons.
+ *
+ * @param {boolean} shouldCompareAsDates Tells if the value should be converted.
+ * @param {any} a The value to maybe convert.
+ *
+ * @returns {Date|*} The converted or same value.
+ */
+const maybeDate = (shouldCompareAsDates, a) => {
+    return shouldCompareAsDates ? new Date(a) : a;
+};
+
+/**
+ * Component that executes actions before rendering its children.
+ *
+ * Actions include a system to hide.
+ *
+ * @param props The props that served to build an action dependant component.
+ * @returns {*}
+ * @constructor
+ */
+const ActionDependant = (props) => {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    if (!props) {
+        // There is nothing to render or evaluate, so don't even bother checking the actions.
+        return null;
+    }
+
+    const result = getActionsToExecute(props?.actions ?? [], {globalDataContext, templateContext});
+
+    // Encapsulate into actions.
+    return result.reverse().reduce((acc, {ActionComponent, actionProps, actionIndex}) => {
+        // actionProps contains only the info that is related to the action.
+        return <ActionComponent
+            componentProps={props}
+            actionProps={actionProps}
+            actionIndex={actionIndex}>
+            {acc}
+        </ActionComponent>;
+    }, props?.children ?? null);
+};
+
+export default ActionDependant;

package/lib/engine/EventDispatcherContext.jsx

@@ -0,0 +1,16 @@
+import {createContext} from "react";
+
+/**
+ * A context for "globalizing" event dispatchers.
+ *
+ * This will help reducing the count of event listeners added to the DOM,
+ * which would slow down the render if each listener was appended individually.
+ *
+ * @type {React.Context<{removeEventListener: removeEventListener, addEventListener: addEventListener}>}
+ */
+const EventDispatcherContext = createContext({
+    addEventListener: null,
+    removeEventListener: null,
+});
+
+export default EventDispatcherContext;