@easyops-cn/a2ui-react 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -8
- package/dist/0.8/A2UIRenderer.d.ts +11 -37
- package/dist/0.8/A2UIRenderer.js +11 -10
- package/dist/0.8/contexts/A2UIProvider.d.ts +7 -12
- package/dist/0.8/contexts/A2UIProvider.js +23 -25
- package/dist/0.8/contexts/ActionContext.js +3 -3
- package/dist/0.8/index.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -40,8 +40,8 @@ function App() {
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
return (
|
|
43
|
-
<A2UIProvider messages={messages}
|
|
44
|
-
<A2UIRenderer />
|
|
43
|
+
<A2UIProvider messages={messages}>
|
|
44
|
+
<A2UIRenderer onAction={handleAction} />
|
|
45
45
|
</A2UIProvider>
|
|
46
46
|
)
|
|
47
47
|
}
|
|
@@ -69,12 +69,8 @@ const ComponentsMap = new Map<string, React.ComponentType<any>>([
|
|
|
69
69
|
|
|
70
70
|
function App() {
|
|
71
71
|
return (
|
|
72
|
-
<A2UIProvider
|
|
73
|
-
|
|
74
|
-
messages={messages}
|
|
75
|
-
onAction={handleAction}
|
|
76
|
-
>
|
|
77
|
-
<A2UIRenderer />
|
|
72
|
+
<A2UIProvider components={ComponentsMap} messages={messages}>
|
|
73
|
+
<A2UIRenderer onAction={handleAction} />
|
|
78
74
|
</A2UIProvider>
|
|
79
75
|
)
|
|
80
76
|
}
|
|
@@ -1,37 +1,11 @@
|
|
|
1
|
+
import { ActionHandler } from './types';
|
|
1
2
|
/**
|
|
2
|
-
*
|
|
3
|
-
*
|
|
4
|
-
* This component renders the surfaces from the A2UI context.
|
|
5
|
-
* It must be used within an A2UIProvider.
|
|
6
|
-
*
|
|
7
|
-
* @example
|
|
8
|
-
* ```tsx
|
|
9
|
-
* import { A2UIProvider, A2UIRenderer, A2UIMessage, A2UIAction } from '@easyops-cn/a2ui-react/0.8'
|
|
10
|
-
*
|
|
11
|
-
* function App() {
|
|
12
|
-
* const messages: A2UIMessage[] = [...]
|
|
13
|
-
* const handleAction = (action: A2UIAction) => {
|
|
14
|
-
* console.log('Action:', action)
|
|
15
|
-
* }
|
|
16
|
-
* return (
|
|
17
|
-
* <A2UIProvider messages={messages} onAction={handleAction}>
|
|
18
|
-
* <A2UIRenderer />
|
|
19
|
-
* </A2UIProvider>
|
|
20
|
-
* )
|
|
21
|
-
* }
|
|
22
|
-
*
|
|
23
|
-
* // With custom middleware component that uses hooks
|
|
24
|
-
* function AppWithMiddleware() {
|
|
25
|
-
* return (
|
|
26
|
-
* <A2UIProvider messages={messages} onAction={handleAction}>
|
|
27
|
-
* <MyCustomMiddleware>
|
|
28
|
-
* <A2UIRenderer />
|
|
29
|
-
* </MyCustomMiddleware>
|
|
30
|
-
* </A2UIProvider>
|
|
31
|
-
* )
|
|
32
|
-
* }
|
|
33
|
-
* ```
|
|
3
|
+
* Props for A2UIRenderer.
|
|
34
4
|
*/
|
|
5
|
+
export interface A2UIRendererProps {
|
|
6
|
+
/** Callback when an action is dispatched */
|
|
7
|
+
onAction?: ActionHandler;
|
|
8
|
+
}
|
|
35
9
|
/**
|
|
36
10
|
* Component for rendering A2UI surfaces.
|
|
37
11
|
*
|
|
@@ -40,18 +14,18 @@
|
|
|
40
14
|
* @example
|
|
41
15
|
* ```tsx
|
|
42
16
|
* // Basic usage
|
|
43
|
-
* <A2UIProvider messages={messages}
|
|
44
|
-
* <A2UIRenderer />
|
|
17
|
+
* <A2UIProvider messages={messages}>
|
|
18
|
+
* <A2UIRenderer onAction={handleAction} />
|
|
45
19
|
* </A2UIProvider>
|
|
46
20
|
*
|
|
47
21
|
* // With custom middleware for hooks access
|
|
48
|
-
* <A2UIProvider messages={messages}
|
|
22
|
+
* <A2UIProvider messages={messages}>
|
|
49
23
|
* <MyCustomComponent />
|
|
50
|
-
* <A2UIRenderer />
|
|
24
|
+
* <A2UIRenderer onAction={handleAction} />
|
|
51
25
|
* </A2UIProvider>
|
|
52
26
|
* ```
|
|
53
27
|
*/
|
|
54
|
-
export declare function A2UIRenderer(): import("react/jsx-runtime").JSX.Element | null;
|
|
28
|
+
export declare function A2UIRenderer({ onAction }: A2UIRendererProps): import("react/jsx-runtime").JSX.Element | null;
|
|
55
29
|
export declare namespace A2UIRenderer {
|
|
56
30
|
var displayName: string;
|
|
57
31
|
}
|
package/dist/0.8/A2UIRenderer.js
CHANGED
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useSurfaceContext as
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { useSurfaceContext as m } from "./contexts/SurfaceContext.js";
|
|
3
|
+
import { ActionProvider as f } from "./contexts/ActionContext.js";
|
|
4
|
+
import { ComponentRenderer as p } from "./components/ComponentRenderer.js";
|
|
5
|
+
function u({ onAction: t }) {
|
|
6
|
+
const { surfaces: i } = m(), r = Array.from(i.entries());
|
|
7
|
+
return r.length === 0 ? null : /* @__PURE__ */ n(f, { onAction: t, children: r.map(([e, o]) => o.root ? /* @__PURE__ */ n(
|
|
8
|
+
p,
|
|
8
9
|
{
|
|
9
10
|
surfaceId: e,
|
|
10
|
-
componentId:
|
|
11
|
+
componentId: o.root
|
|
11
12
|
},
|
|
12
13
|
e
|
|
13
14
|
) : null) });
|
|
14
15
|
}
|
|
15
|
-
|
|
16
|
+
u.displayName = "A2UI.Renderer";
|
|
16
17
|
export {
|
|
17
|
-
|
|
18
|
+
u as A2UIRenderer
|
|
18
19
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode, ComponentType } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { A2UIMessage, BaseComponentProps } from '../types';
|
|
3
3
|
/**
|
|
4
4
|
* Type for custom component map.
|
|
5
5
|
*/
|
|
@@ -10,8 +10,6 @@ export type ComponentsMap = Map<string, ComponentType<BaseComponentProps & Recor
|
|
|
10
10
|
export interface A2UIProviderProps {
|
|
11
11
|
/** Array of A2UI messages to render */
|
|
12
12
|
messages: A2UIMessage[];
|
|
13
|
-
/** Callback when an action is dispatched */
|
|
14
|
-
onAction?: ActionHandler;
|
|
15
13
|
/** Custom component overrides */
|
|
16
14
|
components?: ComponentsMap;
|
|
17
15
|
children: ReactNode;
|
|
@@ -22,20 +20,18 @@ export interface A2UIProviderProps {
|
|
|
22
20
|
* Provides:
|
|
23
21
|
* - SurfaceContext: Component tree management
|
|
24
22
|
* - DataModelContext: Data model state
|
|
25
|
-
* - ActionContext: Action dispatching
|
|
26
23
|
* - ComponentsMapContext: Custom component overrides
|
|
27
24
|
*
|
|
28
25
|
* @param props - Component props
|
|
29
26
|
* @param props.messages - Array of A2UI messages to render
|
|
30
|
-
* @param props.onAction - Optional callback when an action is dispatched
|
|
31
27
|
* @param props.components - Optional custom component overrides
|
|
32
28
|
* @param props.children - Child components (typically A2UIRenderer)
|
|
33
29
|
*
|
|
34
30
|
* @example
|
|
35
31
|
* ```tsx
|
|
36
32
|
* // Basic usage
|
|
37
|
-
* <A2UIProvider messages={messages}
|
|
38
|
-
* <A2UIRenderer />
|
|
33
|
+
* <A2UIProvider messages={messages}>
|
|
34
|
+
* <A2UIRenderer onAction={handleAction} />
|
|
39
35
|
* </A2UIProvider>
|
|
40
36
|
*
|
|
41
37
|
* // With custom components
|
|
@@ -45,17 +41,16 @@ export interface A2UIProviderProps {
|
|
|
45
41
|
* ])
|
|
46
42
|
* <A2UIProvider
|
|
47
43
|
* messages={messages}
|
|
48
|
-
* onAction={handleAction}
|
|
49
44
|
* components={customComponents}
|
|
50
45
|
* >
|
|
51
|
-
* <A2UIRenderer />
|
|
46
|
+
* <A2UIRenderer onAction={handleAction} />
|
|
52
47
|
* </A2UIProvider>
|
|
53
48
|
*
|
|
54
49
|
* // With custom middleware for hooks access
|
|
55
|
-
* <A2UIProvider messages={messages}
|
|
50
|
+
* <A2UIProvider messages={messages}>
|
|
56
51
|
* <MyCustomComponent />
|
|
57
|
-
* <A2UIRenderer />
|
|
52
|
+
* <A2UIRenderer onAction={handleAction} />
|
|
58
53
|
* </A2UIProvider>
|
|
59
54
|
* ```
|
|
60
55
|
*/
|
|
61
|
-
export declare function A2UIProvider({ messages,
|
|
56
|
+
export declare function A2UIProvider({ messages, components, children, }: A2UIProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,35 +1,33 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useEffect as
|
|
3
|
-
import { SurfaceProvider as
|
|
4
|
-
import { DataModelProvider as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
function l({
|
|
1
|
+
import { jsx as e, Fragment as n } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as i } from "react";
|
|
3
|
+
import { SurfaceProvider as f } from "./SurfaceContext.js";
|
|
4
|
+
import { DataModelProvider as m } from "./DataModelContext.js";
|
|
5
|
+
import { ComponentsMapProvider as a } from "./ComponentsMapContext.js";
|
|
6
|
+
import { componentRegistry as c } from "../components/ComponentRenderer.js";
|
|
7
|
+
import { useA2UIMessageHandler as p } from "../hooks/useA2UIMessageHandler.js";
|
|
8
|
+
function d({
|
|
10
9
|
messages: r,
|
|
11
|
-
children:
|
|
10
|
+
children: t
|
|
12
11
|
}) {
|
|
13
|
-
const { processMessages:
|
|
14
|
-
return
|
|
15
|
-
|
|
16
|
-
}, [r,
|
|
12
|
+
const { processMessages: o, clear: s } = p();
|
|
13
|
+
return i(() => {
|
|
14
|
+
s(), r && r.length > 0 && o(r);
|
|
15
|
+
}, [r, o, s]), /* @__PURE__ */ e(n, { children: t });
|
|
17
16
|
}
|
|
18
|
-
function
|
|
17
|
+
function A({
|
|
19
18
|
messages: r,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
children: t
|
|
19
|
+
components: t,
|
|
20
|
+
children: o
|
|
23
21
|
}) {
|
|
24
|
-
return /* @__PURE__ */
|
|
25
|
-
|
|
22
|
+
return /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(
|
|
23
|
+
a,
|
|
26
24
|
{
|
|
27
|
-
components:
|
|
28
|
-
defaultComponents:
|
|
29
|
-
children: /* @__PURE__ */
|
|
25
|
+
components: t,
|
|
26
|
+
defaultComponents: c,
|
|
27
|
+
children: /* @__PURE__ */ e(d, { messages: r ?? [], children: o })
|
|
30
28
|
}
|
|
31
|
-
) }) })
|
|
29
|
+
) }) });
|
|
32
30
|
}
|
|
33
31
|
export {
|
|
34
|
-
|
|
32
|
+
A as A2UIProvider
|
|
35
33
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useContext as x, createContext as C, useCallback as p, useMemo as f } from "react";
|
|
3
3
|
import { useDataModelContext as v } from "./DataModelContext.js";
|
|
4
4
|
import { resolveActionContext as A } from "../utils/dataBinding.js";
|
|
5
|
-
const s =
|
|
5
|
+
const s = C(null);
|
|
6
6
|
function P({ onAction: t, children: c }) {
|
|
7
7
|
const { getDataModel: o } = v(), e = p(
|
|
8
8
|
(n, a, r) => {
|
|
@@ -29,7 +29,7 @@ function P({ onAction: t, children: c }) {
|
|
|
29
29
|
return /* @__PURE__ */ m(s.Provider, { value: i, children: c });
|
|
30
30
|
}
|
|
31
31
|
function g() {
|
|
32
|
-
const t =
|
|
32
|
+
const t = x(s);
|
|
33
33
|
if (!t)
|
|
34
34
|
throw new Error("useActionContext must be used within an ActionProvider");
|
|
35
35
|
return t;
|
package/dist/0.8/index.d.ts
CHANGED
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
*/
|
|
35
35
|
export type { A2UIMessage, ActionPayload as A2UIAction, Action, ValueSource, } from './types';
|
|
36
36
|
export type { A2UIProviderProps, ComponentsMap } from './contexts/A2UIProvider';
|
|
37
|
+
export type { A2UIRendererProps } from './A2UIRenderer';
|
|
37
38
|
export { A2UIProvider } from './contexts/A2UIProvider';
|
|
38
39
|
export { A2UIRenderer } from './A2UIRenderer';
|
|
39
40
|
export { ComponentRenderer } from './components/ComponentRenderer';
|