@json-render/react 0.2.0 → 0.4.2

package/dist/index.js

@@ -37,8 +37,12 @@ __export(index_exports, {
   Renderer: () => Renderer,
   ValidationProvider: () => ValidationProvider,
   VisibilityProvider: () => VisibilityProvider,
+  createRenderer: () => createRenderer,
   createRendererFromCatalog: () => createRendererFromCatalog,
+  defineRegistry: () => defineRegistry,
+  elementTreeSchema: () => elementTreeSchema,
   flatToTree: () => flatToTree,
+  schema: () => schema,
   useAction: () => useAction,
   useActions: () => useActions,
   useData: () => useData,
@@ -64,6 +68,16 @@ function DataProvider({
   children
 }) {
   const [data, setData] = (0, import_react.useState)(initialData);
+  const initialDataJsonRef = (0, import_react.useRef)(JSON.stringify(initialData));
+  (0, import_react.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 = (0, import_react.useCallback)((path) => (0, import_core.getByPath)(data, path), [data]);
   const set = (0, import_react.useCallback)(
     (path, value2) => {
@@ -109,12 +123,12 @@ function useData() {
   return ctx;
 }
 function useDataValue(path) {
-  const { get } = useData();
-  return get(path);
+  const { data } = useData();
+  return (0, import_core.getByPath)(data, path);
 }
 function useDataBinding(path) {
-  const { get, set } = useData();
-  const value = get(path);
+  const { data, set } = useData();
+  const value = (0, import_core.getByPath)(data, path);
   const setValue = (0, import_react.useCallback)(
     (newValue) => set(path, newValue),
     [path, set]
@@ -515,11 +529,58 @@ function useFieldValidation(path, config) {
   };
 }
 
+// src/schema.ts
+var import_core5 = require("@json-render/core");
+var schema = (0, import_core5.defineSchema)((s) => ({
+  // What the AI-generated SPEC looks like
+  spec: s.object({
+    /** Root element key */
+    root: s.string(),
+    /** Flat map of elements by key */
+    elements: s.record(
+      s.object({
+        /** Unique key for this element */
+        key: s.string(),
+        /** Component type from catalog */
+        type: s.ref("catalog.components"),
+        /** Component props */
+        props: s.propsOf("catalog.components"),
+        /** Child element keys (flat reference) */
+        children: s.array(s.string()),
+        /** Parent element key (null for root) */
+        parentKey: s.string(),
+        /** Visibility condition */
+        visible: s.any()
+      })
+    )
+  }),
+  // What the CATALOG must provide
+  catalog: s.object({
+    /** Component definitions */
+    components: s.map({
+      /** Zod schema for component props */
+      props: s.zod(),
+      /** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */
+      slots: s.array(s.string()),
+      /** Description for AI generation hints */
+      description: s.string()
+    }),
+    /** Action definitions (optional) */
+    actions: s.map({
+      /** Zod schema for action params */
+      params: s.zod(),
+      /** Description for AI generation hints */
+      description: s.string()
+    })
+  })
+}));
+var elementTreeSchema = schema;
+
 // src/renderer.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ElementRenderer({
   element,
-  tree,
+  spec,
   registry,
   loading,
   fallback
@@ -535,7 +596,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;
     }
@@ -543,7 +604,7 @@ function ElementRenderer({
       ElementRenderer,
       {
         element: childElement,
-        tree,
+        spec,
         registry,
         loading,
         fallback
@@ -553,11 +614,11 @@ function ElementRenderer({
   });
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(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;
   }
@@ -565,7 +626,7 @@ function Renderer({ tree, registry, loading, fallback }) {
     ElementRenderer,
     {
       element: rootElement,
-      tree,
+      spec,
       registry,
       loading,
       fallback
@@ -614,10 +675,93 @@ function createRendererFromCatalog(_catalog, registry) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Renderer, { ...props, registry });
   };
 }
+function defineRegistry(_catalog, options) {
+  const registry = {};
+  if (options.components) {
+    for (const [name, componentFn] of Object.entries(options.components)) {
+      registry[name] = ({
+        element,
+        children,
+        onAction,
+        loading
+      }) => {
+        return componentFn({
+          props: element.props,
+          children,
+          onAction,
+          loading
+        });
+      };
+    }
+  }
+  const actionMap = options.actions ? Object.entries(options.actions) : [];
+  const handlers = (getSetData, getData) => {
+    const result = {};
+    for (const [name, actionFn] of actionMap) {
+      result[name] = async (params) => {
+        const setData = getSetData();
+        const data = getData();
+        if (setData) {
+          await actionFn(params, setData, data);
+        }
+      };
+    }
+    return result;
+  };
+  const executeAction2 = async (actionName, params, setData, data = {}) => {
+    const entry = actionMap.find(([name]) => name === actionName);
+    if (entry) {
+      await entry[1](params, setData, data);
+    } else {
+      console.warn(`Unknown action: ${actionName}`);
+    }
+  };
+  return { registry, handlers, executeAction: executeAction2 };
+}
+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__ */ (0, import_jsx_runtime5.jsx)(
+      DataProvider,
+      {
+        initialData: data,
+        authState,
+        onDataChange,
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ValidationProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Renderer,
+            {
+              spec,
+              registry,
+              loading,
+              fallback
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ConfirmationDialogManager, {})
+        ] }) }) })
+      }
+    );
+  };
+}
 
 // src/hooks.ts
 var import_react5 = require("react");
-var import_core5 = require("@json-render/core");
+var import_core6 = require("@json-render/core");
 function parsePatchLine(line) {
   try {
     const trimmed = line.trim();
@@ -629,33 +773,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 };
-            (0, import_core5.setByPath)(
+            (0, import_core6.setByPath)(
               newElement,
               propPath,
               patch.value
             );
-            newTree.elements[elementKey] = newElement;
+            newSpec.elements[elementKey] = newElement;
           }
         }
       }
@@ -665,26 +809,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] = (0, import_react5.useState)(null);
+  const [spec, setSpec] = (0, import_react5.useState)(null);
   const [isStreaming, setIsStreaming] = (0, import_react5.useState)(false);
   const [error, setError] = (0, import_react5.useState)(null);
   const abortControllerRef = (0, import_react5.useRef)(null);
   const clear = (0, import_react5.useCallback)(() => {
-    setTree(null);
+    setSpec(null);
     setError(null);
   }, []);
   const send = (0, import_react5.useCallback)(
@@ -693,8 +837,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",
@@ -702,12 +847,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) {
@@ -724,19 +879,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;
@@ -756,7 +911,7 @@ function useUIStream({
     };
   }, []);
   return {
-    tree,
+    spec,
     isStreaming,
     error,
     send,
@@ -799,8 +954,12 @@ function flatToTree(elements) {
   Renderer,
   ValidationProvider,
   VisibilityProvider,
+  createRenderer,
   createRendererFromCatalog,
+  defineRegistry,
+  elementTreeSchema,
   flatToTree,
+  schema,
   useAction,
   useActions,
   useData,