@ea-lab/reactive-json 0.0.20 → 0.0.22

package/lib/engine/ReactiveJsonRoot.jsx

@@ -1,318 +0,0 @@
-import EventDispatcherProvider from "./EventDispatcherProvider";
-import GlobalDataContextProvider from "./GlobalDataContextProvider";
-import TemplateContext from "./TemplateContext";
-import View from "./View";
-import axios from "axios";
-import {load} from 'js-yaml';
-import {isEqual} from "lodash";
-import {useEffect, useReducer, useState} from 'react';
-
-/**
- * Production ready app root.
- *
- * @param {string} dataFetchMethod The fetch method for the init data. Case-insensitive.
- *     Use "POST" for post. Other values mean "GET".
- * @param {string} dataUrl The URL of the document containing the build data. Either JSON or YAML.
- * @param {{}} headersForData Headers for the data request, such as authentication info.
- * @param {{}} plugins Reactive-JSON plugins.
- * @param {boolean} debugMode Set to true to show the data structure and debug info.
- * @param {React.Element|null} DebugModeContentWrapper Wrapper around the main reactive-json content when in debug mode.
- * @param {React.Element|null} DebugModeDataWrapper Wrapper around the reactive-json debug data when in debug mode.
- * @param {React.Element|null} DebugModeMainWrapper Wrapper around the reactive-json root when in debug mode.
- *
- * @returns {JSX.Element}
- *
- * @constructor
- */
-function ReactiveJsonRoot({
-                              dataFetchMethod,
-                              dataUrl,
-                              headersForData,
-                              plugins,
-                              debugMode,
-                              DebugModeContentWrapper,
-                              DebugModeDataWrapper,
-                              DebugModeRootWrapper,
-                          }) {
-    // Dev note: on PhpStorm, disregard the Function signatures inspection errors of reducers.
-    // See: https://youtrack.jetbrains.com/issue/WEB-53963.
-    // noinspection JSCheckFunctionSignatures
-    const [currentData, dispatchCurrentData] = useReducer((prevState, dispatched) => {
-        switch (dispatched.type) {
-            case "setData":
-                return {updateId: 0, realCurrentData: dispatched.data};
-
-            case "updateData":
-                return updateObject(prevState, dispatched.path, dispatched.value, dispatched.updateMode);
-
-            default:
-                // Unknown type.
-                return prevState;
-        }
-    }, {updateId: 0, realCurrentData: {}});
-    const [updatable, setUpdatable] = useState(0);
-    const [templates, setTemplates] = useState({});
-    const [renderView, setRenderView] = useState({});
-    const [items, setItems] = useState([]);
-    const [rawAppData, setRawAppData] = useState();
-
-    useEffect(() => {
-        if (!dataUrl) {
-            return;
-        }
-
-        if (typeof dataFetchMethod === "string" && dataFetchMethod.toLowerCase() === "post") {
-            // TODO: support form data.
-            axios.post(
-                dataUrl,
-                {
-                    headers: headersForData,
-                }).then((res) => {
-                setRawAppData(res.data);
-            });
-        } else {
-            axios.get(
-                dataUrl,
-                {
-                    headers: headersForData,
-                }).then((res) => {
-                setRawAppData(res.data);
-            });
-        }
-    }, [dataUrl, headersForData]);
-
-    useEffect(() => {
-        if (!rawAppData) {
-            // Not yet initialized.
-            return;
-        }
-
-        let parsedData = rawAppData;
-
-        if (typeof parsedData !== "object") {
-            try {
-                // Parse as JSON.
-                parsedData = JSON.parse(rawAppData);
-            } catch {
-                try {
-                    // Parse as YAML.
-                    parsedData = load(rawAppData);
-                } catch {
-                    console.log("Tried to load app data but the content could not be parsed as JSON nor YAML.");
-                    return;
-                }
-            }
-        }
-
-        // Dev note: listForms is deprecated; will be removed later.
-        setTemplates(parsedData.templates ?? parsedData.listForms);
-
-        if (!parsedData.templates && parsedData.listForms) {
-            console.log("'listForms' needs to be renamed to 'templates'. The support for 'listForms' will be removed in the next releases of reactive-json.");
-        }
-
-        // noinspection JSCheckFunctionSignatures
-        dispatchCurrentData({type: "setData", "data": parsedData.data});
-        setRenderView(parsedData.renderView);
-        setItems(Object.keys(parsedData.renderView));
-    }, [rawAppData]);
-
-    const updateData = (newValue, pathInData, updateMode = undefined) => {
-        let path = pathInData.replace('data.', '');
-
-        // noinspection JSCheckFunctionSignatures
-        dispatchCurrentData({
-            type: "updateData",
-            path: path,
-            value: newValue,
-            updateMode: updateMode,
-        });
-    }
-
-    /**
-     * Updates the given data object.
-     *
-     * This must be a function to be used in the currentData's reducer.
-     *
-     * @param {{updateId: Number, realCurrentData: {}}} data The current data to edit. It will be mutated.
-     *     updateId will increment when a re-render is needed.
-     * @param {string} path The path where to put (or remove) the data.
-     * @param {any} value The value to set. If undefined, the value will be removed at the given path.
-     * @param {string} updateMode The update mode, either "add", "move", "remove", or leave empty for replace.
-     *
-     * @returns {{updateId: Number, realCurrentData: {}}} Data with update ID changed if a render is needed.
-     */
-    function updateObject(data, path, value, updateMode = undefined) {
-        const splitPath = path.split(".");
-
-        // This will point to the current nested object.
-        let pointer = data.realCurrentData;
-
-        for (let i = 0, len = splitPath.length; i < len; i++) {
-            const currentNodeKey = splitPath[i];
-
-            if (i === len - 1) {
-                // This is the last key from the path.
-                if (updateMode === "remove" && Array.isArray(pointer)) {
-                    // Remove the entry from the array.
-                    pointer.splice(currentNodeKey, 1);
-                } else if (updateMode === "move") {
-                    // "value" contains the info about how to move.
-                    if (value.increment) {
-                        // Towards the start of the array.
-                        if (!Array.isArray(pointer)) {
-                            // Not a valid "up" value. Do nothing.
-                            return data;
-                        }
-
-                        const newIndex = Math.min(pointer.length, Math.max(0, parseInt(currentNodeKey) + parseInt(value.increment)));
-
-                        if (newIndex === parseInt(currentNodeKey)) {
-                            // No changes.
-                            return data;
-                        }
-
-                        const itemToMove = pointer.splice(currentNodeKey, 1);
-
-                        if (itemToMove.length < 1) {
-                            // Nothing to move.
-                            return data;
-                        }
-
-                        pointer.splice(newIndex, 0, itemToMove[0]);
-                    } else {
-                        // Nothing to move.
-                        return data;
-                    }
-                } else {
-                    if (value === undefined) {
-                        // Unset the key.
-                        delete pointer[currentNodeKey];
-                    } else if (isEqual(value, pointer[currentNodeKey])) {
-                        // The value doesn't change.
-                        return data;
-                    } else {
-                        if (updateMode === "add") {
-                            // Add the value on the property.
-                            if (pointer[currentNodeKey] === undefined) {
-                                pointer[currentNodeKey] = [];
-                            }
-
-                            pointer[currentNodeKey].push(value);
-                        } else {
-                            // Set the value on the property.
-                            pointer[currentNodeKey] = value;
-                        }
-                    }
-                }
-
-                return {
-                    // Using modulo in case of massive update counts in long frontend sessions.
-                    updateId: ((data.updateId ?? 0) % (Number.MAX_SAFE_INTEGER - 1)) + 1,
-                    realCurrentData: data.realCurrentData
-                };
-            }
-
-            if (pointer.hasOwnProperty(currentNodeKey)) {
-                // The pointer already has the specified key.
-
-                // Dig deeper.
-                if (typeof pointer[currentNodeKey] !== "object" || pointer[currentNodeKey] === null) {
-                    // Ensure the data is writable.
-                    pointer[currentNodeKey] = {};
-                }
-
-                // Move the pointer.
-                pointer = pointer[currentNodeKey];
-                continue;
-            }
-
-            // This is a new property.
-            pointer[currentNodeKey] = {};
-            pointer = pointer[currentNodeKey];
-        }
-
-        // This should never happen.
-        throw new Error("Could not update data.");
-    }
-
-    if (!rawAppData) {
-        return null;
-    }
-
-    const rootViews = items.map(view => {
-        return (<View
-            datafield={view}
-            key={view}
-            props={renderView[view]}
-            path={"data." + view}
-            currentData={currentData.realCurrentData[view]}/>)
-    });
-
-    // Snippet from https://stackoverflow.com/a/1414175.
-    // Enhanced to support other value types.
-    function stringToBoolean(stringValue) {
-        if (!stringValue) {
-            return false;
-        }
-
-        if (typeof stringValue === "boolean") {
-            return stringValue;
-        }
-
-        if (typeof stringValue !== "string") {
-            return true;
-        }
-
-        switch (stringValue?.toLowerCase()?.trim()) {
-            case "true":
-            case "yes":
-            case "1":
-                return true;
-
-            case "false":
-            case "no":
-            case "0":
-            case "null":
-            case "undefined":
-                return false;
-
-            default:
-                return stringValue.length > 0;
-        }
-    }
-
-    const debugMode_bool = stringToBoolean(debugMode);
-
-    const mainBuild = (
-        <EventDispatcherProvider>
-            <GlobalDataContextProvider
-                value={{
-                    element: templates,
-                    headersForData,
-                    plugins,
-                    setRawAppData,
-                    templateData: currentData.realCurrentData,
-                    templatePath: "data",
-                    updateData
-                }}>
-                <TemplateContext.Provider value={{templateData: currentData.realCurrentData, templatePath: "data"}}>
-                    {(debugMode_bool && DebugModeContentWrapper)
-                        ? <DebugModeContentWrapper>{rootViews}</DebugModeContentWrapper>
-                        : rootViews}
-                </TemplateContext.Provider>
-                {debugMode_bool
-                    ? (DebugModeDataWrapper && <DebugModeDataWrapper>
-                        {JSON.stringify(currentData.realCurrentData, null, '  ')}
-                    </DebugModeDataWrapper>)
-                    : null}
-            </GlobalDataContextProvider>
-        </EventDispatcherProvider>
-    );
-
-    return (debugMode_bool && DebugModeContentWrapper)
-        ? <DebugModeRootWrapper>{mainBuild}</DebugModeRootWrapper>
-        : mainBuild;
-}
-
-export default ReactiveJsonRoot;

package/lib/engine/TemplateSystem.jsx

@@ -1,302 +0,0 @@
-import {useContext} from "react";
-import GlobalDataContext from "./GlobalDataContext";
-import TemplateContext from "./TemplateContext";
-import {normalizeAttributesForReactJsx} from "../component/element/html/Html";
-
-/**
- * Transforms a data location string to a path to be used in the UI components.
- *
- * @param dataLocation
- * @param currentPath
- * @param globalDataContext
- * @param templateContext
- * @returns {string|*}
- * @constructor
- */
-export const dataLocationToPath = ({dataLocation, currentPath, globalDataContext, templateContext}) => {
-    if (!(typeof dataLocation === "string") || !(dataLocation.startsWith("~.") || dataLocation.startsWith("~~.") || dataLocation.startsWith("~>"))) {
-        if ("~" === dataLocation) {
-            // The data location is the template root.
-            return templateContext.templatePath;
-        }
-
-        if ("~~" === dataLocation) {
-            // The data location is the global template root.
-            return globalDataContext.templatePath;
-        }
-
-        // This value is not a data location.
-        // Render what is given as is.
-        return dataLocation;
-    }
-
-    // This tells if we check in the current template context, the global data, or the current path.
-    let pathBase;
-
-    if (dataLocation.startsWith("~~.")) {
-        // Build the path starting from the global data context path (in theory, just "data").
-        pathBase = globalDataContext.templatePath;
-    } else if (dataLocation.startsWith("~.")) {
-        // Build the path starting from the current template path.
-        pathBase = templateContext.templatePath;
-    } else if (dataLocation.startsWith("~>")) {
-        // Build the path starting from an ascendant of the current template path.
-        const keyToFind = dataLocation.substring(2, dataLocation.indexOf("."));
-
-        if (!templateContext.templatePath.includes(keyToFind)) {
-            throw new Error(keyToFind + " not found in the current template path.");
-        }
-
-        const keyToFindIndex = templateContext.templatePath.indexOf(keyToFind);
-
-        pathBase = templateContext.templatePath.substring(0, keyToFindIndex + keyToFind.length);
-    } else {
-        pathBase = currentPath;
-    }
-
-    const splitLocationArray = dataLocation.split(".");
-
-    // Remove the template value detection character.
-    splitLocationArray.shift();
-
-    return pathBase + "." + splitLocationArray.join(".");
-};
-
-/**
- * Evaluates the given attributes with the given contexts.
- *
- * @param {{}} attrs
- * @param {{}} globalDataContext
- * @param {{}} templateContext
- * @param {{normalizeBeforeEvaluation : boolean}} options normalizeBeforeEvaluation is false if unset.
- *
- * @returns {{}}
- */
-export const evaluateAttributes = ({attrs, globalDataContext, templateContext, options = {}}) => {
-    const evaluated = {};
-
-    if (!attrs) {
-        return evaluated;
-    }
-
-    const normalized = options.normalizeBeforeEvaluation ? normalizeAttributesForReactJsx(attrs) : attrs;
-
-    for (const attrName of Object.keys(normalized)) {
-        // This will replace the value by the template value if it's a valid reference.
-        // We call directly the TemplateValue component as a function to evaluate the attribute value.
-        const evaluatedAttr = evaluateTemplateValue({
-            globalDataContext: globalDataContext,
-            templateContext: templateContext,
-            valueToEvaluate: normalized[attrName]
-        });
-
-        // We only keep the attribute if it can be represented as an attribute value
-        // or be interpreted by React such as callbacks.
-        if (evaluatedAttr) {
-            evaluated[attrName] = evaluatedAttr;
-        }
-
-        // TODO: the next code block has been commented out, because we found that
-        //  it may be more useful to allow objects as attributes (e.g. the style attribute
-        //  which is an object). Remove this block after testing.
-        // switch (typeof evaluatedAttr) {
-        //     case "string":
-        //     case "bigint":
-        //     case "number":
-        //     case "boolean":
-        //     case "function":
-        //         evaluated[attrName] = evaluatedAttr;
-        //         break;
-        //
-        //     default:
-        //         // We only keep the attribute if it can be represented as an attribute value
-        //         // or be interpreted by React such as callbacks.
-        //         delete evaluated[attrName];
-        //         break;
-        // }
-    }
-
-    return evaluated;
-}
-
-/**
- * Evaluates the template value using the given template and global context.
- *
- * @param valueToEvaluate The value to evaluate.
- * @param globalDataContext The global data context.
- * @param templateContext The template context.
- * @returns {undefined|*}
- */
-export const evaluateTemplateValue = ({valueToEvaluate, globalDataContext, templateContext}) => {
-    if (!isTemplateValue(valueToEvaluate)) {
-        // This value does not use the template context data.
-        // Render what is given as is.
-        return valueToEvaluate;
-    }
-
-    /*
-     * Experimental zone.
-     */
-
-    if ("~" === valueToEvaluate) {
-        // We want the whole template data.
-        return templateContext.templateData;
-    } else if ("~~" === valueToEvaluate) {
-        // We want the whole global template data.
-        return globalDataContext.templateData;
-    }
-
-    /*
-     * End of experimental zone.
-     */
-
-    let currentNode;
-
-    if (valueToEvaluate.startsWith("~~.")) {
-        // Start from the global data context node.
-        currentNode = globalDataContext?.templateData;
-    } else if (valueToEvaluate.startsWith("~>")) {
-        // Start from the global data context node, but evaluate the "valueToEvaluate"
-        // to use one of the ascending nodes of the current template.
-        valueToEvaluate = dataLocationToPath({
-            dataLocation: valueToEvaluate,
-            currentPath: templateContext.templatePath,
-            globalDataContext,
-            templateContext,
-        });
-
-        currentNode = globalDataContext?.templateData;
-    } else {
-        // Start from the current template context node.
-        currentNode = templateContext?.templateData;
-    }
-
-    if (!currentNode) {
-        // No context supplied. This is likely a bug; contexts must be supplied when calling this function.
-        return undefined;
-    }
-
-    // Find the value in the template context.
-    const splitValueArray = valueToEvaluate.split(".");
-
-    // Remove the template value detection character.
-    splitValueArray.shift();
-
-    while (splitValueArray.length) {
-        if (typeof currentNode !== "object") {
-            // Not an object, so there is no need to continue.
-            // Return an undefined value.
-            return undefined;
-        }
-
-        currentNode = currentNode[splitValueArray.shift()];
-
-        if (currentNode === undefined) {
-            // No need to continue.
-            // Return an undefined value.
-            return undefined;
-        }
-    }
-
-    return currentNode;
-}
-
-/**
- * Evaluates an array or object containing values to evaluate.
- *
- * You can also pass a single value to evaluate.
- *
- * @param {Array|object|*} valueToEvaluate The value to evaluate. Usually a string, an array, or an object.
- * @param {{}} globalDataContext The global data context values.
- * @param {{}} templateContext The current template context values.
- *
- * @returns {*} The evaluated value. It tries to keep the same structure (array, object, single) as the given value.
- */
-export const evaluateTemplateValueCollection = ({valueToEvaluate, globalDataContext, templateContext}) => {
-    let evaluated;
-
-    if (typeof valueToEvaluate === "object") {
-        // Evaluate any first level values.
-        // Deep (recursive) evaluation is technically possible,
-        // but we are not doing this yet for performance and usefulness reasons.
-        evaluated = Array.isArray(valueToEvaluate) ? [] : {};
-
-        for (const [key, itemContent] of Object.entries(valueToEvaluate)) {
-            evaluated[key] = evaluateTemplateValue({
-                globalDataContext,
-                templateContext,
-                valueToEvaluate: itemContent
-            })
-        }
-    } else {
-        // Single value.
-        evaluated = evaluateTemplateValue({
-            globalDataContext,
-            templateContext,
-            valueToEvaluate
-        });
-    }
-
-    return evaluated;
-}
-
-/**
- * Checks if the given value is a value which can be replaced by the template system.
- * @param valueToEvaluate
- * @returns {string|boolean}
- */
-export const isTemplateValue = (valueToEvaluate) => {
-    if (!(typeof valueToEvaluate === "string") || !(valueToEvaluate.startsWith("~.") || valueToEvaluate.startsWith("~~.") || valueToEvaluate.startsWith("~>") || "~" === valueToEvaluate || "~~" === valueToEvaluate)) {
-        // This value does not use the template context data.
-        return false;
-    }
-
-    // Render what is given as is for chaining.
-    return valueToEvaluate;
-};
-
-/**
- * A template value is a value that is retrieved from the current template data.
- *
- * @param valueToEvaluate
- *
- * @returns {{}}
- *
- * @constructor
- */
-const TemplateValue = ({valueToEvaluate}) => {
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-
-    return evaluateTemplateValue({
-        globalDataContext: globalDataContext,
-        templateContext: templateContext,
-        valueToEvaluate: valueToEvaluate,
-    });
-};
-
-export default TemplateValue;
-
-/**
- * Evaluates the given attributes with the given contexts.
- *
- * @param {{}} attrs
- * @param {{normalizeBeforeEvaluation : boolean}} options normalizeBeforeEvaluation = true if unset.
- *
- * @returns {{}} Evaluated attributes.
- */
-export const useEvaluatedAttributes = (attrs, options = {}) => {
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-
-    return evaluateAttributes(
-        {
-            attrs,
-            globalDataContext,
-            templateContext,
-            options: options.normalizeBeforeEvaluation === undefined
-                ? {...options, normalizeBeforeEvaluation: true}
-                : options,
-        }
-    );
-};