@ea-lab/reactive-json 0.0.4 → 0.0.6

package/lib/engine/ComponentCollector.js

@@ -0,0 +1,26 @@
+/**
+ * Merges component collections (aka plugins).
+ * @param {[{}]} collections Array of plugin collections.
+ * @return {{hook: *[], reaction: *[], action: *[], utility: *[], element: *[]}}
+ */
+export function mergeComponentCollections(collections) {
+    const mergedCollections = {
+        "action": [],
+        "element": [],
+        "hook": [],
+        "reaction": [],
+        "utility": [],
+    };
+
+    collections.forEach((collection) => {
+        for (const [k, v] in Object.entries(collection)) {
+            if (!mergedCollections.hasOwnProperty(k)) {
+                mergedCollections[k] = [];
+            }
+
+            mergedCollections[k].push(v);
+        }
+    });
+
+    return mergedCollections;
+}

package/lib/engine/ReactiveJsonRoot.jsx

@@ -14,6 +14,7 @@ import {useEffect, useReducer, useState} from 'react';
  *     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.
@@ -27,6 +28,7 @@ function ReactiveJsonRoot({
                               dataFetchMethod,
                               dataUrl,
                               headersForData,
+                              plugins,
                               debugMode,
                               DebugModeContentWrapper,
                               DebugModeDataWrapper,

package/lib/engine/View.jsx

@@ -1,7 +1,4 @@
 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";
@@ -34,28 +31,23 @@ import {
     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,

package/lib/main.jsx

@@ -4,11 +4,22 @@
 import "bootstrap/dist/css/bootstrap.min.css";
 
 import ReactiveJsonRoot from "./engine/ReactiveJsonRoot.jsx";
+import {mergeComponentCollections} from "./engine/ComponentCollector.js";
 import {StrictMode} from "react"
 import {createRoot} from "react-dom/client";
 
-export {ReactiveJsonRoot};
+/**
+ * mergeComponentCollections helps in loading plugins when reactive-json is loaded in library mode.
+ */
+export {ReactiveJsonRoot, mergeComponentCollections};
 
+/**
+ * Standalone mode.
+ * @example
+ * <reactive-json data-method="GET" data-url="https://your-site.example/rjs-build/build.json">
+ *     <data-source-request-header data-header-field="X-Header-Field-Name" data-header-value="Your value"></data-source-request-header>
+ * </reactive-json>
+ */
 document.querySelectorAll("reactive-json").forEach((element) => {
     // Use this to change the fetch method.
     const maybeMethod = element.dataset?.method;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ea-lab/reactive-json",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "files": [
     "dist",
@@ -13,7 +13,7 @@
       "require": "./dist/reactive-json.umd.cjs",
       "import": "./dist/reactive-json.js"
     },
-    "./lib/engine/*": "./lib/engine/*"
+    "./lib/*": "./lib/*"
   },
   "scripts": {
     "dev": "vite",
@@ -58,7 +58,6 @@
   },
   "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",
@@ -67,7 +66,6 @@
     "lodash": "^4.17.21",
     "react": ">=18",
     "react-bootstrap": "^2.10.9",
-    "react-chartjs-2": "^5.3.0",
     "react-dom": ">=18"
   }
 }

package/lib/component/element/chart/BarChart.jsx

@@ -1,40 +0,0 @@
-import ActionDependant from "../../../engine/Actions";
-import GlobalDataContext from "../../../engine/GlobalDataContext";
-import TemplateContext from "../../../engine/TemplateContext";
-import {evaluateTemplateValue, useEvaluatedAttributes} from "../../../engine/TemplateSystem";
-import {
-    BarElement,
-    CategoryScale,
-    Chart as ChartJS,
-    Legend,
-    LinearScale,
-    Title,
-    Tooltip,
-} from "chart.js";
-import {useContext} from "react";
-import {Bar} from "react-chartjs-2";
-
-// Register the necessary modules for Chart.js.
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-
-const BarChart = ({props}) => {
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-    const attributes = useEvaluatedAttributes(props.attributes);
-
-    const options = props.options || {};
-
-    const chartData = evaluateTemplateValue({
-        valueToEvaluate: props.data,
-        globalDataContext,
-        templateContext,
-    });
-
-    return (
-        <ActionDependant {...props}>
-            {chartData && <Bar {...attributes} data={chartData} options={options}/>}
-        </ActionDependant>
-    );
-};
-
-export default BarChart;

package/lib/component/element/chart/DoughnutChart.jsx

@@ -1,32 +0,0 @@
-import ActionDependant from "../../../engine/Actions";
-import GlobalDataContext from "../../../engine/GlobalDataContext";
-import TemplateContext from "../../../engine/TemplateContext";
-import {evaluateTemplateValue, useEvaluatedAttributes} from "../../../engine/TemplateSystem";
-import {Chart as ChartJS, ArcElement, Tooltip, Legend} from "chart.js";
-import {useContext} from "react";
-import {Doughnut} from "react-chartjs-2";
-
-// Registering necessary components for Chart.js
-ChartJS.register(ArcElement, Tooltip, Legend);
-
-const DoughnutChart = ({props}) => {
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-    const attributes = useEvaluatedAttributes(props.attributes);
-
-    const options = props.options || {};
-
-    const chartData = evaluateTemplateValue({
-        valueToEvaluate: props.data,
-        globalDataContext,
-        templateContext,
-    });
-
-    return (
-        <ActionDependant {...props}>
-            {chartData && <Doughnut {...attributes} data={chartData} options={options}/>}
-        </ActionDependant>
-    );
-};
-
-export default DoughnutChart;

package/lib/component/element/chart/LineChart.jsx

@@ -1,40 +0,0 @@
-import ActionDependant from "../../../engine/Actions";
-import GlobalDataContext from "../../../engine/GlobalDataContext";
-import TemplateContext from "../../../engine/TemplateContext";
-import {evaluateTemplateValue, useEvaluatedAttributes} from "../../../engine/TemplateSystem";
-import {
-    CategoryScale,
-    Chart as ChartJS, Filler,
-    Legend,
-    LinearScale,
-    LineElement, PointElement,
-    Title,
-    Tooltip,
-} from "chart.js";
-import {useContext} from "react";
-import {Line} from "react-chartjs-2";
-
-// Register the necessary modules for Chart.js.
-ChartJS.register(CategoryScale, LinearScale, LineElement, PointElement, Title, Tooltip, Legend, Filler);
-
-const LineChart = ({props}) => {
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-    const attributes = useEvaluatedAttributes(props.attributes);
-
-    const options = props.options || {};
-
-    const chartData = evaluateTemplateValue({
-        valueToEvaluate: props.data,
-        globalDataContext,
-        templateContext,
-    });
-
-    return (
-        <ActionDependant {...props}>
-            {chartData && <Line {...attributes} data={chartData} options={options}/>}
-        </ActionDependant>
-    );
-};
-
-export default LineChart;

package/lib/component/element/chart/PolarAreaChart.jsx

@@ -1,32 +0,0 @@
-import ActionDependant from "../../../engine/Actions";
-import GlobalDataContext from "../../../engine/GlobalDataContext";
-import TemplateContext from "../../../engine/TemplateContext";
-import {evaluateTemplateValue, useEvaluatedAttributes} from "../../../engine/TemplateSystem";
-import {Chart, RadialLinearScale, ArcElement, Tooltip, Legend} from 'chart.js';
-import {useContext} from "react";
-import {PolarArea} from 'react-chartjs-2';
-
-// Registering the necessary components for Chart.js.
-Chart.register(RadialLinearScale, ArcElement, Tooltip, Legend);
-
-const PolarAreaChart = ({props}) => {
-    const globalDataContext = useContext(GlobalDataContext);
-    const templateContext = useContext(TemplateContext);
-    const attributes = useEvaluatedAttributes(props.attributes);
-
-    const options = props.options || {};
-
-    const chartData = evaluateTemplateValue({
-        valueToEvaluate: props.data,
-        globalDataContext,
-        templateContext,
-    });
-
-    return (
-        <ActionDependant {...props}>
-            {chartData && <PolarArea {...attributes} data={chartData} options={options}/>}
-        </ActionDependant>
-    );
-};
-
-export default PolarAreaChart;