@ea-lab/reactive-json 0.0.0

package/lib/engine/EventDispatcherProvider.jsx

@@ -0,0 +1,80 @@
+import {memo} from "react";
+import EventDispatcherContext from "./EventDispatcherContext";
+
+/**
+ * Contains the registered listeners. It's shared between all the components.
+ *
+ * @type {{}}
+ */
+const events = {};
+
+/**
+ * The main dispatcher which will really be called by the browser's event system.
+ *
+ * @param {Event} event The event sent by the browser, which will be transferred to the registered listeners.
+ */
+const mainDispatcher = (event) => {
+    if (!events.hasOwnProperty(event.type)) {
+        // Ignore this event.
+        return;
+    }
+
+    for (const registeredListener of events[event.type]) {
+        // Inject the event details into the registered listener.
+        registeredListener(event);
+    }
+};
+
+/**
+ * Adds the listener to registered listeners.
+ *
+ * @param {string} type The event type.
+ * @param {Function} listener The event listener.
+ */
+export const addEventListener = (type, listener) => {
+    if (events.hasOwnProperty(type)) {
+        events[type].push(listener);
+    } else {
+        // This is a new event type. Add the event listener.
+        window.addEventListener(type, mainDispatcher);
+
+        events[type] = [listener];
+    }
+};
+
+/**
+ * Removes the specified listener.
+ *
+ * @param {string} type Event type.
+ * @param {Function} listener Event listener.
+ */
+export const removeEventListener = (type, listener) => {
+    if (!events.hasOwnProperty(type)) {
+        return;
+    }
+
+    const index = events[type].indexOf(listener);
+
+    if (index > -1) {
+        // Remove once the item.
+        events[type].splice(index, 1);
+    }
+};
+
+/**
+ * Use this provider in combination with EventDispatcherContext.
+ *
+ * @param props
+ *
+ * @returns {JSX.Element}
+ *
+ * @constructor
+ */
+const EventDispatcherProvider = (props) => {
+    return <EventDispatcherContext.Provider value={{addEventListener, removeEventListener}}>
+        {props.children}
+    </EventDispatcherContext.Provider>;
+}
+
+// TODO: evaluate if memo is useful here.
+export default memo(EventDispatcherProvider);

package/lib/engine/GlobalDataContext.jsx

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+/**
+ * This context contains all the build data for the current app.
+ *
+ * The use of this context is similar to TemplateContext,
+ * but the difference is that this one has only one instance.
+ *
+ * @type {React.Context<{}>}
+ */
+const GlobalDataContext = createContext({});
+
+export default GlobalDataContext;

package/lib/engine/GlobalDataContextProvider.jsx

@@ -0,0 +1,33 @@
+import GlobalDataContext from "./GlobalDataContext";
+
+/**
+ * Standard implementation of the provider for GlobalDataContext.
+ *
+ * @param props Component props. Must have the "value" key.
+ *
+ * @returns {JSX.Element}
+ *
+ * @constructor
+ */
+const GlobalDataContextProvider = (props) => {
+    // Shallow copy. This will help to keep the original data representation.
+    const valueCopy = {...props.value};
+
+    if (valueCopy.getRootContext === undefined) {
+        // The root context is unset.
+        // Self reference this root object with this closure.
+        // It's useful so that new global data contexts such as those created
+        // by the DataFilter component can access the root global data context value
+        // instead of the current GlobalDataContext value from useContext().
+        // The submitData reaction function uses such root value.
+        valueCopy.getRootContext = () => {
+            return props.value;
+        };
+    }
+
+    return <GlobalDataContext.Provider value={valueCopy}>
+        {props.children}
+    </GlobalDataContext.Provider>;
+}
+
+export default GlobalDataContextProvider;

package/lib/engine/PaginationContext.jsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+/**
+ * This is a context opened when a pagination is needed.
+ *
+ * @type {React.Context<{}>}
+ */
+const PaginationContext = createContext({pagination: {}});
+
+export default PaginationContext;

package/lib/engine/PaginationProvider.jsx

@@ -0,0 +1,61 @@
+import {memo, useReducer, useRef, useState} from "react";
+import PaginationContext from "./PaginationContext";
+
+/**
+ * Use this provider in combination with EventDispatcherContext.
+ *
+ * @param props
+ *
+ * @returns {JSX.Element}
+ *
+ * @constructor
+ * @deprecated ne fonctionne pas, envisager un système de preemptiveActions pour filtrer les items en amont
+ */
+const PaginationProvider = (props) => {
+    const {
+        after,
+        before,
+        contentToPaginate,
+        pagination,
+    } = props;
+    // TODO: essayer d'obtenir le nombre réel à afficher.
+
+    // TODO: essayer d'obtenir seulement les objets à afficher. (Hide lance dispatch(remove) par ex
+    const completeItemCount = contentToPaginate.length;
+
+
+    // Slice for the pagination if in effect.
+    const contentSlice = props?.paginated
+        ? contentToPaginate.slice(pagination.firstShownItemIndex, pagination.maxShownItemIndexExcluded)
+        : contentToPaginate;
+
+
+
+    // Dev note: on PhpStorm, disregard the Function signatures inspection errors of reducers.
+    // See: https://youtrack.jetbrains.com/issue/WEB-53963.
+    // noinspection JSCheckFunctionSignatures
+    const [itemCountAdjustment, dispatchItemCountAdjustment] = useReducer((prevState, dispatched) => {
+        switch (dispatched.type) {
+            case "increment":
+                return prevState + 1;
+
+            case "decrement":
+                return prevState - 1;
+
+            default:
+                // Unknown type.
+                return prevState;
+        }
+    }, {updateId: 0, realCurrentData: {}});
+
+
+
+    return <PaginationContext.Provider value={{dispatchItemCountAdjustment, pagination}}>
+        {before}
+        {contentSlice}
+        {after}
+    </PaginationContext.Provider>;
+}
+
+// TODO: evaluate if memo is useful here.
+export default PaginationProvider;

package/lib/engine/ReactiveJsonRoot.jsx

@@ -0,0 +1,315 @@
+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 {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,
+                              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,
+                    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/TemplateContext.jsx

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+/**
+ * A template context contains the data that is shared between the contained components.
+ *
+ * A template context is created when using the "load" keyword in the render array,
+ * and it is supplied with the current data of the component that loaded the template.
+ *
+ * @type {React.Context<{}>}
+ */
+const TemplateContext = createContext({});
+
+export default TemplateContext;