@json-render/react 0.1.0 → 0.4.0

package/dist/index.mjs

@@ -1,10 +1,17 @@
+import {
+  elementTreeSchema,
+  schema
+} from "./chunk-IGPI5WNB.mjs";
+
 // src/contexts/data.tsx
 import {
   createContext,
   useContext,
   useState,
   useCallback,
-  useMemo
+  useMemo,
+  useEffect,
+  useRef
 } from "react";
 import {
   getByPath,
@@ -19,10 +26,17 @@ function DataProvider({
   children
 }) {
   const [data, setData] = useState(initialData);
-  const get = useCallback(
-    (path) => getByPath(data, path),
-    [data]
-  );
+  const initialDataJsonRef = useRef(JSON.stringify(initialData));
+  useEffect(() => {
+    const newJson = JSON.stringify(initialData);
+    if (newJson !== initialDataJsonRef.current) {
+      initialDataJsonRef.current = newJson;
+      if (initialData && Object.keys(initialData).length > 0) {
+        setData((prev) => ({ ...prev, ...initialData }));
+      }
+    }
+  }, [initialData]);
+  const get = useCallback((path) => getByPath(data, path), [data]);
   const set = useCallback(
     (path, value2) => {
       setData((prev) => {
@@ -67,12 +81,12 @@ function useData() {
   return ctx;
 }
 function useDataValue(path) {
-  const { get } = useData();
-  return get(path);
+  const { data } = useData();
+  return getByPath(data, path);
 }
 function useDataBinding(path) {
-  const { get, set } = useData();
-  const value = get(path);
+  const { data, set } = useData();
+  const value = getByPath(data, path);
   const setValue = useCallback(
     (newValue) => set(path, newValue),
     [path, set]
@@ -81,7 +95,11 @@ function useDataBinding(path) {
 }
 
 // src/contexts/visibility.tsx
-import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useMemo as useMemo2
+} from "react";
 import {
   evaluateVisibility
 } from "@json-render/core";
@@ -141,9 +159,12 @@ function ActionProvider({
   const [handlers, setHandlers] = useState2(initialHandlers);
   const [loadingActions, setLoadingActions] = useState2(/* @__PURE__ */ new Set());
   const [pendingConfirmation, setPendingConfirmation] = useState2(null);
-  const registerHandler = useCallback2((name, handler) => {
-    setHandlers((prev) => ({ ...prev, [name]: handler }));
-  }, []);
+  const registerHandler = useCallback2(
+    (name, handler) => {
+      setHandlers((prev) => ({ ...prev, [name]: handler }));
+    },
+    []
+  );
   const execute = useCallback2(
     async (action) => {
       const resolved = resolveAction(action, data);
@@ -226,7 +247,15 @@ function ActionProvider({
       cancel,
       registerHandler
     }),
-    [handlers, loadingActions, pendingConfirmation, execute, confirm, cancel, registerHandler]
+    [
+      handlers,
+      loadingActions,
+      pendingConfirmation,
+      execute,
+      confirm,
+      cancel,
+      registerHandler
+    ]
   );
   return /* @__PURE__ */ jsx3(ActionContext.Provider, { value, children });
 }
@@ -243,7 +272,11 @@ function useAction(action) {
   const executeAction2 = useCallback2(() => execute(action), [execute, action]);
   return { execute: executeAction2, isLoading };
 }
-function ConfirmDialog({ confirm, onConfirm, onCancel }) {
+function ConfirmDialog({
+  confirm,
+  onConfirm,
+  onCancel
+}) {
   const isDanger = confirm.variant === "danger";
   return /* @__PURE__ */ jsx3(
     "div",
@@ -360,9 +393,12 @@ function ValidationProvider({
   const { data, authState } = useData();
   const [fieldStates, setFieldStates] = useState3({});
   const [fieldConfigs, setFieldConfigs] = useState3({});
-  const registerField = useCallback3((path, config) => {
-    setFieldConfigs((prev) => ({ ...prev, [path]: config }));
-  }, []);
+  const registerField = useCallback3(
+    (path, config) => {
+      setFieldConfigs((prev) => ({ ...prev, [path]: config }));
+    },
+    []
+  );
   const validate = useCallback3(
     (path, config) => {
       const value2 = data[path.split("/").filter(Boolean).join(".")];
@@ -421,7 +457,15 @@ function ValidationProvider({
       validateAll,
       registerField
     }),
-    [customFunctions, fieldStates, validate, touch, clear, validateAll, registerField]
+    [
+      customFunctions,
+      fieldStates,
+      validate,
+      touch,
+      clear,
+      validateAll,
+      registerField
+    ]
   );
   return /* @__PURE__ */ jsx4(ValidationContext.Provider, { value, children });
 }
@@ -470,7 +514,7 @@ function useFieldValidation(path, config) {
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function ElementRenderer({
   element,
-  tree,
+  spec,
   registry,
   loading,
   fallback
@@ -486,7 +530,7 @@ function ElementRenderer({
     return null;
   }
   const children = element.children?.map((childKey) => {
-    const childElement = tree.elements[childKey];
+    const childElement = spec.elements[childKey];
     if (!childElement) {
       return null;
     }
@@ -494,7 +538,7 @@ function ElementRenderer({
       ElementRenderer,
       {
         element: childElement,
-        tree,
+        spec,
         registry,
         loading,
         fallback
@@ -502,21 +546,13 @@ function ElementRenderer({
       childKey
     );
   });
-  return /* @__PURE__ */ jsx5(
-    Component,
-    {
-      element,
-      onAction: execute,
-      loading,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx5(Component, { element, onAction: execute, loading, children });
 }
-function Renderer({ tree, registry, loading, fallback }) {
-  if (!tree || !tree.root) {
+function Renderer({ spec, registry, loading, fallback }) {
+  if (!spec || !spec.root) {
     return null;
   }
-  const rootElement = tree.elements[tree.root];
+  const rootElement = spec.elements[spec.root];
   if (!rootElement) {
     return null;
   }
@@ -524,7 +560,7 @@ function Renderer({ tree, registry, loading, fallback }) {
     ElementRenderer,
     {
       element: rootElement,
-      tree,
+      spec,
       registry,
       loading,
       fallback
@@ -573,9 +609,49 @@ function createRendererFromCatalog(_catalog, registry) {
     return /* @__PURE__ */ jsx5(Renderer, { ...props, registry });
   };
 }
+function createRenderer(catalog, components) {
+  const registry = components;
+  return function CatalogRenderer({
+    spec,
+    data,
+    onAction,
+    onDataChange,
+    loading,
+    authState,
+    fallback
+  }) {
+    const actionHandlers = onAction ? {
+      __default__: (params) => {
+        const actionName = params.__actionName__;
+        const actionParams = params.__actionParams__;
+        return onAction(actionName, actionParams);
+      }
+    } : void 0;
+    return /* @__PURE__ */ jsx5(
+      DataProvider,
+      {
+        initialData: data,
+        authState,
+        onDataChange,
+        children: /* @__PURE__ */ jsx5(VisibilityProvider, { children: /* @__PURE__ */ jsx5(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ jsxs2(ValidationProvider, { children: [
+          /* @__PURE__ */ jsx5(
+            Renderer,
+            {
+              spec,
+              registry,
+              loading,
+              fallback
+            }
+          ),
+          /* @__PURE__ */ jsx5(ConfirmationDialogManager, {})
+        ] }) }) })
+      }
+    );
+  };
+}
 
 // src/hooks.ts
-import { useState as useState4, useCallback as useCallback4, useRef, useEffect } from "react";
+import { useState as useState4, useCallback as useCallback4, useRef as useRef2, useEffect as useEffect2 } from "react";
 import { setByPath as setByPath2 } from "@json-render/core";
 function parsePatchLine(line) {
   try {
@@ -588,29 +664,33 @@ function parsePatchLine(line) {
     return null;
   }
 }
-function applyPatch(tree, patch) {
-  const newTree = { ...tree, elements: { ...tree.elements } };
+function applyPatch(spec, patch) {
+  const newSpec = { ...spec, elements: { ...spec.elements } };
   switch (patch.op) {
     case "set":
     case "add":
     case "replace": {
       if (patch.path === "/root") {
-        newTree.root = patch.value;
-        return newTree;
+        newSpec.root = patch.value;
+        return newSpec;
       }
       if (patch.path.startsWith("/elements/")) {
         const pathParts = patch.path.slice("/elements/".length).split("/");
         const elementKey = pathParts[0];
-        if (!elementKey) return newTree;
+        if (!elementKey) return newSpec;
         if (pathParts.length === 1) {
-          newTree.elements[elementKey] = patch.value;
+          newSpec.elements[elementKey] = patch.value;
         } else {
-          const element = newTree.elements[elementKey];
+          const element = newSpec.elements[elementKey];
           if (element) {
             const propPath = "/" + pathParts.slice(1).join("/");
             const newElement = { ...element };
-            setByPath2(newElement, propPath, patch.value);
-            newTree.elements[elementKey] = newElement;
+            setByPath2(
+              newElement,
+              propPath,
+              patch.value
+            );
+            newSpec.elements[elementKey] = newElement;
           }
         }
       }
@@ -620,26 +700,26 @@ function applyPatch(tree, patch) {
       if (patch.path.startsWith("/elements/")) {
         const elementKey = patch.path.slice("/elements/".length).split("/")[0];
         if (elementKey) {
-          const { [elementKey]: _, ...rest } = newTree.elements;
-          newTree.elements = rest;
+          const { [elementKey]: _, ...rest } = newSpec.elements;
+          newSpec.elements = rest;
         }
       }
       break;
     }
   }
-  return newTree;
+  return newSpec;
 }
 function useUIStream({
   api,
   onComplete,
   onError
 }) {
-  const [tree, setTree] = useState4(null);
+  const [spec, setSpec] = useState4(null);
   const [isStreaming, setIsStreaming] = useState4(false);
   const [error, setError] = useState4(null);
-  const abortControllerRef = useRef(null);
+  const abortControllerRef = useRef2(null);
   const clear = useCallback4(() => {
-    setTree(null);
+    setSpec(null);
     setError(null);
   }, []);
   const send = useCallback4(
@@ -648,8 +728,9 @@ function useUIStream({
       abortControllerRef.current = new AbortController();
       setIsStreaming(true);
       setError(null);
-      let currentTree = { root: "", elements: {} };
-      setTree(currentTree);
+      const previousSpec = context?.previousSpec;
+      let currentSpec = previousSpec && previousSpec.root ? { ...previousSpec, elements: { ...previousSpec.elements } } : { root: "", elements: {} };
+      setSpec(currentSpec);
       try {
         const response = await fetch(api, {
           method: "POST",
@@ -657,12 +738,22 @@ function useUIStream({
           body: JSON.stringify({
             prompt,
             context,
-            currentTree
+            currentSpec
           }),
           signal: abortControllerRef.current.signal
         });
         if (!response.ok) {
-          throw new Error(`HTTP error: ${response.status}`);
+          let errorMessage = `HTTP error: ${response.status}`;
+          try {
+            const errorData = await response.json();
+            if (errorData.message) {
+              errorMessage = errorData.message;
+            } else if (errorData.error) {
+              errorMessage = errorData.error;
+            }
+          } catch {
+          }
+          throw new Error(errorMessage);
         }
         const reader = response.body?.getReader();
         if (!reader) {
@@ -679,19 +770,19 @@ function useUIStream({
           for (const line of lines) {
             const patch = parsePatchLine(line);
             if (patch) {
-              currentTree = applyPatch(currentTree, patch);
-              setTree({ ...currentTree });
+              currentSpec = applyPatch(currentSpec, patch);
+              setSpec({ ...currentSpec });
             }
           }
         }
         if (buffer.trim()) {
           const patch = parsePatchLine(buffer);
           if (patch) {
-            currentTree = applyPatch(currentTree, patch);
-            setTree({ ...currentTree });
+            currentSpec = applyPatch(currentSpec, patch);
+            setSpec({ ...currentSpec });
           }
         }
-        onComplete?.(currentTree);
+        onComplete?.(currentSpec);
       } catch (err) {
         if (err.name === "AbortError") {
           return;
@@ -705,13 +796,13 @@ function useUIStream({
     },
     [api, onComplete, onError]
   );
-  useEffect(() => {
+  useEffect2(() => {
     return () => {
       abortControllerRef.current?.abort();
     };
   }, []);
   return {
-    tree,
+    spec,
     isStreaming,
     error,
     send,
@@ -753,8 +844,11 @@ export {
   Renderer,
   ValidationProvider,
   VisibilityProvider,
+  createRenderer,
   createRendererFromCatalog,
+  elementTreeSchema,
   flatToTree,
+  schema,
   useAction,
   useActions,
   useData,