@ea-lab/reactive-json 0.0.0

package/lib/engine/TemplateSystem.jsx

@@ -0,0 +1,302 @@
+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,
+        }
+    );
+};

package/lib/engine/View.jsx

@@ -0,0 +1,240 @@
+import {useContext} from 'react';
+import BarChart from "../component/element/chart/BarChart";
+import DoughnutChart from "../component/element/chart/DoughnutChart";
+import PolarAreaChart from "../component/element/chart/PolarAreaChart";
+import CheckBoxField from "../component/element/form/CheckBoxField";
+import DateField from "../component/element/form/DateField";
+import NumberField from "../component/element/form/NumberField";
+import SelectField from "../component/element/form/SelectField";
+import TextAreaField from "../component/element/form/TextAreaField";
+import TextField from "../component/element/form/TextField";
+import AccordionItem from "../component/element/html/AccordionItem";
+import FolderSortableTree from "../component/element/html/FolderSortableTree";
+import FormatNumeral from "../component/element/html/FormatNumeral";
+import Html from "../component/element/html/Html";
+import LabelFromValue from "../component/element/html/LabelFromValue";
+import Modal from "../component/element/html/Modal";
+import Paragraph from "../component/element/html/Paragraph";
+import PreformattedMarkup from "../component/element/html/PreformattedMarkup";
+import SortableTreeItemCollapseButton from "../component/element/html/SortableTreeItemCollapseButton";
+import Tabs from "../component/element/html/Tabs";
+import BootstrapElement from "../component/element/special/BootstrapElement";
+import Count from "../component/element/special/Count";
+import DataFilter from "../component/element/special/DataFilter";
+import DelayedActions from "../component/element/special/DelayedActions";
+import PageControls from "../component/element/special/PageControls";
+import Phantom from "../component/element/special/Phantom";
+import Switch from "../component/element/special/Switch";
+import GlobalDataContext from "./GlobalDataContext";
+import TemplateContext from "./TemplateContext";
+import TemplateValue, {dataLocationToPath, evaluateTemplateValue} from "./TemplateSystem";
+import {
+    Accordion,
+    Alert,
+    Badge,
+    Button,
+} from "react-bootstrap";
+import LineChart from "../component/element/chart/LineChart";
+
+const components = {
+    AccordionItem,
+    BarChart,
+    CheckBoxField,
+    Count,
+    DateField,
+    DataFilter,
+    DelayedActions,
+    DoughnutChart,
+    FolderSortableTree,
+    FormatNumeral,
+    Html,
+    LabelFromValue,
+    LineChart,
+    Modal,
+    NumberField,
+    PageControls,
+    Paragraph,
+    Phantom,
+    PolarAreaChart,
+    PreformattedMarkup,
+    SelectField,
+    SortableTreeItemCollapseButton,
+    Switch,
+    Tabs,
+    TextAreaField,
+    TextField,
+};
+
+/**
+ * Gives direct access to React Bootstrap components.
+ */
+const bootstrapComponents = {
+    BsAccordion: Accordion,
+    BsAlert: Alert,
+    BsBadge: Badge,
+    BsButton: Button,
+};
+
+function View({props, currentData, datafield, path}) {
+    const globalDataContext = useContext(GlobalDataContext);
+    const templateContext = useContext(TemplateContext);
+
+    const {element} = globalDataContext;
+
+    if (currentData === undefined) {
+        currentData = "";
+    }
+
+    if (props?.type) {
+        // A type is specified.
+        // First, try to find a component matching the given type by name.
+        // When not found, we map to a Html component as fallback.
+        let componentRegistryId = undefined;
+        let ComponentToRender = undefined;
+
+        const componentRegistries = [
+            {"registryId": "module", "components": components},
+            {"registryId": "bootstrap", "components": bootstrapComponents},
+        ];
+
+        while (componentRegistries.length) {
+            const {registryId, components: registryComponents} = componentRegistries.shift();
+
+            ComponentToRender = registryComponents[props.type] ?? undefined;
+
+            if (ComponentToRender !== undefined) {
+                componentRegistryId = registryId;
+                break;
+            }
+        }
+
+        if (ComponentToRender === undefined) {
+            // Use the module:Html component as fallback.
+            ComponentToRender = Html;
+            componentRegistryId = "module";
+        }
+
+        if (componentRegistryId === "bootstrap") {
+            return <BootstrapElement
+                bsComponent={ComponentToRender}
+                path={path}
+                props={props}
+                currentData={currentData}
+                datafield={datafield}/>;
+        }
+
+        if (Html === ComponentToRender) {
+            // Either the user has specifically asked for a Html component,
+            // or this is a fallback for an unknown type.
+            // Make sure the tag is set.
+            props.tag = props.tag ?? props.type;
+        }
+
+        return <ComponentToRender
+            path={path}
+            props={props}
+            currentData={currentData}
+            datafield={datafield}/>;
+    }
+
+    if (props?.load) {
+        // An external render source must be loaded.
+        // let load = props.load;
+        let loadedRenderArray;
+
+        const _customDataLocation = props?.customDataLocation ?? undefined;
+        if (_customDataLocation) debugger;
+
+        // Determine which data to use.
+        const finalCurrentData = _customDataLocation
+            // The data is located somewhere in the current data.
+            ? evaluateTemplateValue({
+                globalDataContext: globalDataContext,
+                templateContext: templateContext,
+                valueToEvaluate: _customDataLocation,
+            })
+            // The data is the current data.
+            : currentData;
+
+        // The data path must be set accordingly.
+        const finalDataPath = _customDataLocation
+            ? dataLocationToPath({dataLocation: _customDataLocation, currentPath: path, globalDataContext, templateContext})
+            : path;
+
+        // This external source can return a single component to render,
+        // or a collection of components.
+        if (typeof props.load === "function") {
+            // A JS function has been defined. Execute it with the currentData.
+            // The function must return a render array.
+            loadedRenderArray = props.load(finalCurrentData);
+        } else {
+            // Load the render array from the registry.
+            loadedRenderArray = element[props.load];
+        }
+
+        // Override any values of the registry render array with the current render array,
+        // without the properties specific to the "load" method.
+        const {load, customDataLocation, ...propsWithoutLoadKey} = props;
+        loadedRenderArray = {...loadedRenderArray, ...propsWithoutLoadKey};
+
+        // Now that we have our render array, recurse on the View component.
+        if (props.keepTemplateContext) {
+            // Keep the current template context.
+            return (
+                <View
+                    currentData={finalCurrentData}
+                    datafield={datafield}
+                    path={finalDataPath}
+                    props={loadedRenderArray}
+                />
+            );
+        }
+
+        // We open a new template context in the process.
+        return (
+            <TemplateContext.Provider value={{templateData: finalCurrentData, templatePath: finalDataPath}}>
+                <View
+                    currentData={finalCurrentData}
+                    datafield={datafield}
+                    path={finalDataPath}
+                    props={loadedRenderArray}
+                />
+            </TemplateContext.Provider>
+        );
+    }
+
+    // Try to go deeper to render something.
+    if (Array.isArray(props)) {
+        return props.map((item, index) =>
+            <View
+                currentData={currentData[index] ?? undefined}
+                datafield={index}
+                key={path + "." + index}
+                path={path + "." + index}
+                props={item ?? undefined}
+            />
+        );
+    }
+
+    if (typeof props === "object") {
+        return Object.entries(props).map(([itemKey, item]) => {
+                return <View
+                    currentData={currentData[itemKey] ?? undefined}
+                    datafield={itemKey ?? undefined}
+                    key={path + "." + itemKey}
+                    path={path + "." + itemKey}
+                    props={item}
+                />
+            }
+        );
+    }
+
+    // Display the content directly.
+    // The content tries to use the currentData in case the data wants to rewrite the output.
+    // If not available, we simply use the given props, which is usually a string, which can
+    // also be a reference to a template context data.
+    // If no props is available, do not render anything.
+    return <TemplateValue valueToEvaluate={currentData || (props ?? null)}/>;
+}
+
+export default View;

package/lib/main.jsx

@@ -0,0 +1,41 @@
+/**
+ * Entry point for the lib.
+ */
+import "bootstrap/dist/css/bootstrap.min.css";
+
+import ReactiveJsonRoot from "./engine/ReactiveJsonRoot.jsx";
+import {StrictMode} from "react"
+import {createRoot} from "react-dom/client";
+
+export {ReactiveJsonRoot};
+
+document.querySelectorAll("reactive-json").forEach((element) => {
+    // Use this to change the fetch method.
+    const maybeMethod = element.dataset?.method;
+
+    // Get data included in the root element.
+    const headersForData_asElements = element.querySelectorAll("data-source-request-header");
+    const headersForData = headersForData_asElements.length ? {} : undefined;
+
+    headersForData_asElements.forEach((headerElement, key, parent) => {
+        const headerField = headerElement?.dataset?.headerField;
+        const headerValue = headerElement?.dataset?.headerValue;
+
+        if (!headerField || !headerValue) {
+            return;
+        }
+
+        headersForData[headerField] = headerValue;
+    });
+
+    // TODO: Retrieve the reactive-json plugins and inject them in ReactiveJsonRoot.
+    createRoot(element).render(
+        <StrictMode>
+            <ReactiveJsonRoot
+                dataFetchMethod={maybeMethod}
+                dataUrl={element.dataset.url}
+                headersForData={headersForData}
+            />
+        </StrictMode>,
+    );
+});

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@ea-lab/reactive-json",
+  "version": "0.0.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "lib"
+  ],
+  "main": "./dist/reactive-json.umd.cjs",
+  "module": "./dist/reactive-json.js",
+  "exports": {
+    ".": {
+      "require": "./dist/reactive-json.umd.cjs",
+      "import": "./dist/reactive-json.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://bitbucket.org/ea-lab/reactive-json.git"
+  },
+  "keywords": [
+    "build",
+    "config",
+    "data",
+    "dynamic",
+    "interactive",
+    "json",
+    "react",
+    "structure",
+    "yaml"
+  ],
+  "author": "Quang-Minh DANG <quang-minh@ea-lab.io> (https://ea-lab.io/)",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://bitbucket.org/ea-lab/reactive-json/issues"
+  },
+  "homepage": "https://bitbucket.org/ea-lab/reactive-json#readme",
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/node": "^22.14.1",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^4.3.4",
+    "bootstrap": "^5.3.5",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "react-router-dom": "^7.5.0",
+    "vite": "^6.2.0"
+  },
+  "peerDependencies": {
+    "axios": "^1.8.4",
+    "chart.js": "^4.4.8",
+    "clsx": "^2.1.1",
+    "dnd-kit-sortable-tree": "^0.1.73",
+    "html-react-parser": "^5.2.3",
+    "js-yaml": "^4.1.0",
+    "jsonpath": "^1.1.1",
+    "lodash": "^4.17.21",
+    "react": ">=18",
+    "react-bootstrap": "^2.10.9",
+    "react-chartjs-2": "^5.3.0",
+    "react-dom": ">=18"
+  }
+}