@easyops-cn/a2ui-react 0.0.5 → 0.0.6

package/README.md

@@ -22,10 +22,11 @@ First, use the `@source` directive to tell Tailwind to scan the library code for
 @source "../node_modules/@easyops-cn/a2ui-react";
 ```
 
-Next, use the `A2UIRenderer` component to render A2UI messages:
+Next, use `A2UIProvider` and `A2UIRenderer` to render A2UI messages:
 
 ```tsx
 import {
+  A2UIProvider,
   A2UIRenderer,
   type A2UIMessage,
   type A2UIAction,
@@ -38,19 +39,24 @@ function App() {
     console.log('Action received:', action)
   }
 
-  return <A2UIRenderer messages={messages} onAction={handleAction} />
+  return (
+    <A2UIProvider messages={messages} onAction={handleAction}>
+      <A2UIRenderer />
+    </A2UIProvider>
+  )
 }
 ```
 
 ### Custom components
 
-You can override default components or add new custom components via the `components` prop, which takes a `Map<string, React.ComponentType>`.
+You can override default components or add new custom components via the `components` prop on `A2UIProvider`, which takes a `Map<string, React.ComponentType>`.
 
 ```tsx
 import {
+  A2UIProvider,
   A2UIRenderer,
-  A2UIMessage,
-  A2UIAction,
+  type A2UIMessage,
+  type A2UIAction,
 } from '@easyops-cn/a2ui-react/0.8'
 
 const ComponentsMap = new Map<string, React.ComponentType<any>>([
@@ -63,11 +69,13 @@ const ComponentsMap = new Map<string, React.ComponentType<any>>([
 
 function App() {
   return (
-    <A2UIRenderer
+    <A2UIProvider
       components={ComponentsMap}
       messages={messages}
       onAction={handleAction}
-    />
+    >
+      <A2UIRenderer />
+    </A2UIProvider>
   )
 }
 ```

package/dist/0.8/A2UIRenderer.d.ts

@@ -1,49 +1,57 @@
-import { ComponentType } from 'react';
-import { A2UIMessage, ActionPayload, BaseComponentProps } from './types';
 /**
- * Type for custom component map.
- */
-export type ComponentsMap = Map<string, ComponentType<BaseComponentProps & Record<string, unknown>>>;
-/**
- * Props for A2UIRenderer component.
+ * A2UIRenderer - Component for rendering A2UI surfaces.
+ *
+ * This component renders the surfaces from the A2UI context.
+ * It must be used within an A2UIProvider.
+ *
+ * @example
+ * ```tsx
+ * import { A2UIProvider, A2UIRenderer, A2UIMessage, A2UIAction } from '@easyops-cn/a2ui-react/0.8'
+ *
+ * function App() {
+ *   const messages: A2UIMessage[] = [...]
+ *   const handleAction = (action: A2UIAction) => {
+ *     console.log('Action:', action)
+ *   }
+ *   return (
+ *     <A2UIProvider messages={messages} onAction={handleAction}>
+ *       <A2UIRenderer />
+ *     </A2UIProvider>
+ *   )
+ * }
+ *
+ * // With custom middleware component that uses hooks
+ * function AppWithMiddleware() {
+ *   return (
+ *     <A2UIProvider messages={messages} onAction={handleAction}>
+ *       <MyCustomMiddleware>
+ *         <A2UIRenderer />
+ *       </MyCustomMiddleware>
+ *     </A2UIProvider>
+ *   )
+ * }
+ * ```
  */
-export interface A2UIRenderProps {
-    /** Array of A2UI messages to render */
-    messages: A2UIMessage[];
-    /** Callback when an action is dispatched */
-    onAction?: (action: ActionPayload) => void;
-    /** Custom component overrides */
-    components?: ComponentsMap;
-}
 /**
- * Main entry component for rendering A2UI messages.
- *
- * Processes an array of A2UIMessage objects and renders the resulting UI.
- * Supports custom component overrides via the components prop.
+ * Component for rendering A2UI surfaces.
  *
- * @param props - Component props
- * @param props.messages - Array of A2UI messages to render
- * @param props.onAction - Optional callback when an action is dispatched
- * @param props.components - Optional custom component overrides
+ * Renders all surfaces from the A2UI context. Must be used within an A2UIProvider.
  *
  * @example
  * ```tsx
  * // Basic usage
- * <A2UIRenderer messages={messages} onAction={handleAction} />
+ * <A2UIProvider messages={messages} onAction={handleAction}>
+ *   <A2UIRenderer />
+ * </A2UIProvider>
  *
- * // With custom components
- * const customComponents = new Map([
- *   ['Button', CustomButton],
- *   ['Switch', CustomSwitch],
- * ])
- * <A2UIRenderer
- *   messages={messages}
- *   onAction={handleAction}
- *   components={customComponents}
- * />
+ * // With custom middleware for hooks access
+ * <A2UIProvider messages={messages} onAction={handleAction}>
+ *   <MyCustomComponent />
+ *   <A2UIRenderer />
+ * </A2UIProvider>
  * ```
  */
-export declare function A2UIRenderer({ messages, onAction, components, }: A2UIRenderProps): import("react/jsx-runtime").JSX.Element;
+export declare function A2UIRenderer(): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace A2UIRenderer {
     var displayName: string;
 }

package/dist/0.8/A2UIRenderer.js

@@ -1,40 +1,18 @@
-import { jsx as e, Fragment as f } from "react/jsx-runtime";
-import { useEffect as p } from "react";
-import { A2UIProvider as c } from "./contexts/A2UIProvider.js";
-import { ComponentsMapProvider as a } from "./contexts/ComponentsMapContext.js";
-import { useSurfaceContext as u } from "./contexts/SurfaceContext.js";
-import { useA2UIMessageHandler as l } from "./hooks/useA2UIMessageHandler.js";
-import { componentRegistry as d, ComponentRenderer as g } from "./components/ComponentRenderer.js";
-function A({ messages: r }) {
-  const { processMessages: n, clear: o } = l(), { surfaces: t } = u();
-  p(() => {
-    o(), r && r.length > 0 && n(r);
-  }, [r, n, o]);
-  const s = Array.from(t.entries());
-  return s.length === 0 ? null : /* @__PURE__ */ e(f, { children: s.map(([i, m]) => m.root ? /* @__PURE__ */ e(
-    g,
+import { jsx as t, Fragment as m } from "react/jsx-runtime";
+import { useSurfaceContext as i } from "./contexts/SurfaceContext.js";
+import { ComponentRenderer as u } from "./components/ComponentRenderer.js";
+function f() {
+  const { surfaces: o } = i(), r = Array.from(o.entries());
+  return r.length === 0 ? null : /* @__PURE__ */ t(m, { children: r.map(([e, n]) => n.root ? /* @__PURE__ */ t(
+    u,
     {
-      surfaceId: i,
-      componentId: m.root
+      surfaceId: e,
+      componentId: n.root
     },
-    i
+    e
   ) : null) });
 }
-function I({
-  messages: r,
-  onAction: n,
-  components: o
-}) {
-  return /* @__PURE__ */ e(c, { onAction: n, children: /* @__PURE__ */ e(
-    a,
-    {
-      components: o,
-      defaultComponents: d,
-      children: /* @__PURE__ */ e(A, { messages: r ?? [] })
-    }
-  ) });
-}
-I.displayName = "A2UI.Render";
+f.displayName = "A2UI.Renderer";
 export {
-  I as A2UIRenderer
+  f as A2UIRenderer
 };

package/dist/0.8/contexts/A2UIProvider.d.ts

@@ -1,11 +1,19 @@
-import { ReactNode } from 'react';
-import { ActionHandler } from '../types';
+import { ReactNode, ComponentType } from 'react';
+import { ActionHandler, A2UIMessage, BaseComponentProps } from '../types';
+/**
+ * Type for custom component map.
+ */
+export type ComponentsMap = Map<string, ComponentType<BaseComponentProps & Record<string, unknown>>>;
 /**
  * Props for A2UIProvider.
  */
 export interface A2UIProviderProps {
+    /** Array of A2UI messages to render */
+    messages: A2UIMessage[];
     /** Callback when an action is dispatched */
     onAction?: ActionHandler;
+    /** Custom component overrides */
+    components?: ComponentsMap;
     children: ReactNode;
 }
 /**
@@ -15,20 +23,39 @@ export interface A2UIProviderProps {
  * - SurfaceContext: Component tree management
  * - DataModelContext: Data model state
  * - ActionContext: Action dispatching
+ * - ComponentsMapContext: Custom component overrides
+ *
+ * @param props - Component props
+ * @param props.messages - Array of A2UI messages to render
+ * @param props.onAction - Optional callback when an action is dispatched
+ * @param props.components - Optional custom component overrides
+ * @param props.children - Child components (typically A2UIRenderer)
  *
  * @example
  * ```tsx
- * function App() {
- *   const handleAction = (action) => {
- *     console.log('Action:', action);
- *   };
+ * // Basic usage
+ * <A2UIProvider messages={messages} onAction={handleAction}>
+ *   <A2UIRenderer />
+ * </A2UIProvider>
+ *
+ * // With custom components
+ * const customComponents = new Map([
+ *   ['Button', CustomButton],
+ *   ['Switch', CustomSwitch],
+ * ])
+ * <A2UIProvider
+ *   messages={messages}
+ *   onAction={handleAction}
+ *   components={customComponents}
+ * >
+ *   <A2UIRenderer />
+ * </A2UIProvider>
  *
- *   return (
- *     <A2UIProvider onAction={handleAction}>
- *       <A2UIReactRenderer messages={messages} />
- *     </A2UIProvider>
- *   );
- * }
+ * // With custom middleware for hooks access
+ * <A2UIProvider messages={messages} onAction={handleAction}>
+ *   <MyCustomComponent />
+ *   <A2UIRenderer />
+ * </A2UIProvider>
  * ```
  */
-export declare function A2UIProvider({ onAction, children }: A2UIProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function A2UIProvider({ messages, onAction, components, children, }: A2UIProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/0.8/contexts/A2UIProvider.js

@@ -1,10 +1,35 @@
-import { jsx as r } from "react/jsx-runtime";
-import { SurfaceProvider as e } from "./SurfaceContext.js";
-import { DataModelProvider as t } from "./DataModelContext.js";
-import { ActionProvider as m } from "./ActionContext.js";
-function p({ onAction: o, children: i }) {
-  return /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(m, { onAction: o, children: i }) }) });
+import { jsx as o, Fragment as n } from "react/jsx-runtime";
+import { useEffect as s } from "react";
+import { SurfaceProvider as m } from "./SurfaceContext.js";
+import { DataModelProvider as f } from "./DataModelContext.js";
+import { ActionProvider as c } from "./ActionContext.js";
+import { ComponentsMapProvider as p } from "./ComponentsMapContext.js";
+import { componentRegistry as a } from "../components/ComponentRenderer.js";
+import { useA2UIMessageHandler as d } from "../hooks/useA2UIMessageHandler.js";
+function l({
+  messages: r,
+  children: i
+}) {
+  const { processMessages: e, clear: t } = d();
+  return s(() => {
+    t(), r && r.length > 0 && e(r);
+  }, [r, e, t]), /* @__PURE__ */ o(n, { children: i });
+}
+function x({
+  messages: r,
+  onAction: i,
+  components: e,
+  children: t
+}) {
+  return /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(c, { onAction: i, children: /* @__PURE__ */ o(
+    p,
+    {
+      components: e,
+      defaultComponents: a,
+      children: /* @__PURE__ */ o(l, { messages: r ?? [], children: t })
+    }
+  ) }) }) });
 }
 export {
-  p as A2UIProvider
+  x as A2UIProvider
 };

package/dist/0.8/index.d.ts

@@ -6,19 +6,37 @@
  *
  * @example
  * ```tsx
- * import { A2UIRenderer, A2UIMessage, A2UIAction } from '@easyops-cn/a2ui-react/0.8'
+ * import { A2UIProvider, A2UIRenderer, A2UIMessage, A2UIAction } from '@easyops-cn/a2ui-react/0.8'
  *
  * function App() {
  *   const messages: A2UIMessage[] = [...]
  *   const handleAction = (action: A2UIAction) => {
  *     console.log('Action:', action)
  *   }
- *   return <A2UIRenderer messages={messages} onAction={handleAction} />
+ *   return (
+ *     <A2UIProvider messages={messages} onAction={handleAction}>
+ *       <A2UIRenderer />
+ *     </A2UIProvider>
+ *   )
+ * }
+ *
+ * // With custom middleware component that uses hooks
+ * function AppWithMiddleware() {
+ *   return (
+ *     <A2UIProvider messages={messages} onAction={handleAction}>
+ *       <MyCustomMiddleware>
+ *         <A2UIRenderer />
+ *       </MyCustomMiddleware>
+ *     </A2UIProvider>
+ *   )
  * }
  * ```
  */
 export type { A2UIMessage, ActionPayload as A2UIAction, Action, ValueSource, } from './types';
+export type { A2UIProviderProps, ComponentsMap } from './contexts/A2UIProvider';
+export { A2UIProvider } from './contexts/A2UIProvider';
 export { A2UIRenderer } from './A2UIRenderer';
 export { ComponentRenderer } from './components/ComponentRenderer';
 export { useDispatchAction } from './hooks/useDispatchAction';
 export { useDataBinding, useFormBinding } from './hooks/useDataBinding';
+export { useA2UIMessageHandler } from './hooks/useA2UIMessageHandler';

package/dist/0.8/index.js

@@ -1,11 +1,15 @@
-import { A2UIRenderer as o } from "./A2UIRenderer.js";
-import { ComponentRenderer as t } from "./components/ComponentRenderer.js";
-import { useDispatchAction as m } from "./hooks/useDispatchAction.js";
-import { useDataBinding as d, useFormBinding as f } from "./hooks/useDataBinding.js";
+import { A2UIProvider as o } from "./contexts/A2UIProvider.js";
+import { A2UIRenderer as t } from "./A2UIRenderer.js";
+import { ComponentRenderer as p } from "./components/ComponentRenderer.js";
+import { useDispatchAction as s } from "./hooks/useDispatchAction.js";
+import { useDataBinding as f, useFormBinding as x } from "./hooks/useDataBinding.js";
+import { useA2UIMessageHandler as u } from "./hooks/useA2UIMessageHandler.js";
 export {
-  o as A2UIRenderer,
-  t as ComponentRenderer,
-  d as useDataBinding,
-  m as useDispatchAction,
-  f as useFormBinding
+  o as A2UIProvider,
+  t as A2UIRenderer,
+  p as ComponentRenderer,
+  u as useA2UIMessageHandler,
+  f as useDataBinding,
+  s as useDispatchAction,
+  x as useFormBinding
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyops-cn/a2ui-react",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A2UI React Renderer",
   "homepage": "https://easyops-cn.github.io/a2ui-react/",
   "repository": {

package/dist/0.8/A2UIRenderer.test.d.ts

@@ -1,6 +0,0 @@
-/**
- * A2UIRenderer Tests
- *
- * Tests for the main A2UIRenderer component.
- */
-export {};

package/dist/0.8/components/ComponentRenderer.test.d.ts

@@ -1,6 +0,0 @@
-/**
- * ComponentRenderer Tests
- *
- * Tests for the ComponentRenderer component that routes rendering based on type.
- */
-export {};

package/dist/0.8/components/display/display.test.d.ts

@@ -1,7 +0,0 @@
-/**
- * Display Components Tests
- *
- * Tests for TextComponent, ImageComponent, IconComponent, VideoComponent,
- * AudioPlayerComponent, and DividerComponent.
- */
-export {};

package/dist/0.8/components/interactive/interactive.test.d.ts

@@ -1,7 +0,0 @@
-/**
- * Interactive Components Tests
- *
- * Tests for ButtonComponent, CheckBoxComponent, TextFieldComponent,
- * DateTimeInputComponent, MultipleChoiceComponent, and SliderComponent.
- */
-export {};

package/dist/0.8/components/layout/layout.test.d.ts

@@ -1,7 +0,0 @@
-/**
- * Layout Components Tests
- *
- * Tests for RowComponent, ColumnComponent, ListComponent, CardComponent,
- * TabsComponent, and ModalComponent.
- */
-export {};

package/dist/0.8/contexts/A2UIProvider.test.d.ts

@@ -1,6 +0,0 @@
-/**
- * A2UIProvider Tests
- *
- * Tests for the combined A2UI provider component.
- */
-export {};

package/dist/0.8/contexts/ActionContext.test.d.ts

@@ -1,6 +0,0 @@
-/**
- * ActionContext Tests
- *
- * Tests for the Action context provider and hook.
- */
-export {};

package/dist/0.8/contexts/DataModelContext.test.d.ts

@@ -1,6 +0,0 @@
-/**
- * DataModelContext Tests
- *
- * Tests for the DataModel context provider and hook.
- */
-export {};

package/dist/0.8/contexts/SurfaceContext.test.d.ts

@@ -1,6 +0,0 @@
-/**
- * SurfaceContext Tests
- *
- * Tests for the Surface context provider and hook.
- */
-export {};

package/dist/0.8/hooks/useA2UIMessageHandler.test.d.ts

@@ -1,6 +0,0 @@
-/**
- * useA2UIMessageHandler Tests
- *
- * Tests for the useA2UIMessageHandler hook.
- */
-export {};

package/dist/0.8/hooks/useComponent.test.d.ts

@@ -1,6 +0,0 @@
-/**
- * useComponent Tests
- *
- * Tests for the useComponent hook.
- */
-export {};

package/dist/0.8/hooks/useDataBinding.test.d.ts

@@ -1,6 +0,0 @@
-/**
- * useDataBinding Tests
- *
- * Tests for the useDataBinding, useDataModel, and useFormBinding hooks.
- */
-export {};

package/dist/0.8/hooks/useDispatchAction.test.d.ts

@@ -1,6 +0,0 @@
-/**
- * useDispatchAction Tests
- *
- * Tests for the useDispatchAction hooks.
- */
-export {};

package/dist/0.8/hooks/useSurface.test.d.ts

@@ -1,6 +0,0 @@
-/**
- * useSurface Tests
- *
- * Tests for the useSurface hook.
- */
-export {};

package/dist/0.8/utils/dataBinding.test.d.ts

@@ -1,6 +0,0 @@
-/**
- * dataBinding Tests
- *
- * Tests for data binding utility functions used in A2UI.
- */
-export {};

package/dist/0.8/utils/pathUtils.test.d.ts

@@ -1,6 +0,0 @@
-/**
- * pathUtils Tests
- *
- * Tests for path utility functions used in A2UI data model operations.
- */
-export {};