@xmachines/play-react 2.0.0 → 2.1.0
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 +48 -31
- package/dist/ActorProvider.d.ts +24 -20
- package/dist/ActorProvider.d.ts.map +1 -1
- package/dist/ActorProvider.js +97 -83
- package/dist/ActorProvider.js.map +1 -1
- package/dist/PlayErrorBoundary.d.ts +15 -14
- package/dist/PlayErrorBoundary.d.ts.map +1 -1
- package/dist/PlayErrorBoundary.js +10 -9
- package/dist/PlayErrorBoundary.js.map +1 -1
- package/dist/PlayRenderer.d.ts +10 -9
- package/dist/PlayRenderer.d.ts.map +1 -1
- package/dist/PlayRenderer.js +10 -9
- package/dist/PlayRenderer.js.map +1 -1
- package/dist/PlayUIProvider.d.ts +12 -11
- package/dist/PlayUIProvider.d.ts.map +1 -1
- package/dist/PlayUIProvider.js +19 -15
- package/dist/PlayUIProvider.js.map +1 -1
- package/dist/index.d.ts +19 -17
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +16 -18
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +3 -3
- package/dist/types.js +3 -3
- package/dist/useActor.d.ts +7 -5
- package/dist/useActor.d.ts.map +1 -1
- package/dist/useActor.js +4 -4
- package/dist/useActor.js.map +1 -1
- package/dist/useSignalEffect.d.ts +40 -39
- package/dist/useSignalEffect.d.ts.map +1 -1
- package/dist/useSignalEffect.js +61 -58
- package/dist/useSignalEffect.js.map +1 -1
- package/package.json +5 -4
- package/dist/errors.d.ts +0 -23
- package/dist/errors.d.ts.map +0 -1
- package/dist/errors.js +0 -26
- package/dist/errors.js.map +0 -1
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* PlayErrorBoundary - React error boundary
|
|
2
|
+
* PlayErrorBoundary - the React error boundary that catches a render error of a catalog component
|
|
3
3
|
*
|
|
4
4
|
* @packageDocumentation
|
|
5
5
|
*/
|
|
6
6
|
import React from "react";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* The props of PlayErrorBoundary
|
|
9
9
|
*
|
|
10
10
|
* @public
|
|
11
11
|
*/
|
|
12
12
|
export interface PlayErrorBoundaryProps {
|
|
13
|
-
/**
|
|
13
|
+
/** The fallback UI to render when a child component throws. The default is null. */
|
|
14
14
|
fallback?: React.ReactNode;
|
|
15
|
-
/**
|
|
15
|
+
/** The child components to render */
|
|
16
16
|
children: React.ReactNode;
|
|
17
|
-
/**
|
|
17
|
+
/** The optional error handler. It sends each error to an observability tool, such as Sentry */
|
|
18
18
|
onError?: (error: Error, info: React.ErrorInfo) => void;
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
|
-
*
|
|
21
|
+
* The internal state shape of PlayErrorBoundary
|
|
22
22
|
*
|
|
23
23
|
* @public
|
|
24
24
|
*/
|
|
@@ -27,17 +27,18 @@ export interface PlayErrorBoundaryState {
|
|
|
27
27
|
error: Error | null;
|
|
28
28
|
}
|
|
29
29
|
/**
|
|
30
|
-
* React class component error
|
|
30
|
+
* The React class component that catches a render error of a catalog component.
|
|
31
31
|
*
|
|
32
|
-
*
|
|
33
|
-
* React error boundary protocol.
|
|
34
|
-
*
|
|
32
|
+
* It wraps each render of a catalog component. It catches a failure and sends it to
|
|
33
|
+
* the standard React error boundary protocol. Attach the `onError` prop to send
|
|
34
|
+
* each error to an observability tool in production, such as Sentry or Datadog.
|
|
35
35
|
*
|
|
36
|
-
* **React 19 safety (Phase 29):** `componentDidCatch` calls `onError` for
|
|
37
|
-
* but does NOT
|
|
38
|
-
*
|
|
36
|
+
* **React 19 safety (Phase 29):** `componentDidCatch` calls `onError` for the
|
|
37
|
+
* observability, but it does NOT throw the error again. `getDerivedStateFromError`
|
|
38
|
+
* sets the fallback state already, and a throw from `componentDidCatch` can unmount
|
|
39
|
+
* the complete React 19 root.
|
|
39
40
|
*
|
|
40
|
-
*
|
|
41
|
+
* CONS-14: the class component pattern works with every React version, 18 and 19.
|
|
41
42
|
*
|
|
42
43
|
* @example
|
|
43
44
|
* ```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlayErrorBoundary.d.ts","sourceRoot":"","sources":["../src/PlayErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACtC,
|
|
1
|
+
{"version":3,"file":"PlayErrorBoundary.d.ts","sourceRoot":"","sources":["../src/PlayErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACtC,oFAAoF;IACpF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+FAA+F;IAC/F,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;CACxD;AAED;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,iBAAkB,SAAQ,KAAK,CAAC,SAAS,CACrD,sBAAsB,EACtB,sBAAsB,CACtB;gBACY,KAAK,EAAE,sBAAsB;IAKzC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,sBAAsB;IAI5D,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAI5D,MAAM,IAAI,KAAK,CAAC,SAAS;CAMlC"}
|
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* PlayErrorBoundary - React error boundary
|
|
2
|
+
* PlayErrorBoundary - the React error boundary that catches a render error of a catalog component
|
|
3
3
|
*
|
|
4
4
|
* @packageDocumentation
|
|
5
5
|
*/
|
|
6
6
|
import React from "react";
|
|
7
7
|
/**
|
|
8
|
-
* React class component error
|
|
8
|
+
* The React class component that catches a render error of a catalog component.
|
|
9
9
|
*
|
|
10
|
-
*
|
|
11
|
-
* React error boundary protocol.
|
|
12
|
-
*
|
|
10
|
+
* It wraps each render of a catalog component. It catches a failure and sends it to
|
|
11
|
+
* the standard React error boundary protocol. Attach the `onError` prop to send
|
|
12
|
+
* each error to an observability tool in production, such as Sentry or Datadog.
|
|
13
13
|
*
|
|
14
|
-
* **React 19 safety (Phase 29):** `componentDidCatch` calls `onError` for
|
|
15
|
-
* but does NOT
|
|
16
|
-
*
|
|
14
|
+
* **React 19 safety (Phase 29):** `componentDidCatch` calls `onError` for the
|
|
15
|
+
* observability, but it does NOT throw the error again. `getDerivedStateFromError`
|
|
16
|
+
* sets the fallback state already, and a throw from `componentDidCatch` can unmount
|
|
17
|
+
* the complete React 19 root.
|
|
17
18
|
*
|
|
18
|
-
*
|
|
19
|
+
* CONS-14: the class component pattern works with every React version, 18 and 19.
|
|
19
20
|
*
|
|
20
21
|
* @example
|
|
21
22
|
* ```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlayErrorBoundary.js","sourceRoot":"","sources":["../src/PlayErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B
|
|
1
|
+
{"version":3,"file":"PlayErrorBoundary.js","sourceRoot":"","sources":["../src/PlayErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAG5C;IACA,YAAY,KAA6B;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;IAC/C,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC3C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IAClC,CAAC;IAEQ,iBAAiB,CAAC,KAAY,EAAE,IAAqB;QAC7D,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACnC,CAAC;IAEQ,MAAM;QACd,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC;QACpC,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC5B,CAAC;CACD"}
|
package/dist/PlayRenderer.d.ts
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* PlayRenderer —
|
|
2
|
+
* PlayRenderer — the leaf component without props that renders the current actor view.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* then
|
|
4
|
+
* Render it inside <ActorProvider> or <PlayUIProvider>.
|
|
5
|
+
* It reads the view spec, the handlers, and the registry from the usePlayView()
|
|
6
|
+
* context. It then gives them to the Renderer of @xmachines/json-render-react.
|
|
7
7
|
*
|
|
8
|
-
* Standard
|
|
8
|
+
* Standard use:
|
|
9
9
|
* ```tsx
|
|
10
10
|
* <PlayUIProvider actor={actor} registryResult={registryResult}>
|
|
11
11
|
* <PlayRenderer />
|
|
12
12
|
* </PlayUIProvider>
|
|
13
13
|
* ```
|
|
14
14
|
*
|
|
15
|
-
* For custom provider composition, use <ActorProvider
|
|
15
|
+
* For a custom provider composition, use the low-level <ActorProvider>:
|
|
16
16
|
* ```tsx
|
|
17
17
|
* <ActorProvider actor={actor} registryResult={registryResult}>
|
|
18
18
|
* <JSONUIProvider registry={registryResult.registry}>
|
|
@@ -25,10 +25,11 @@
|
|
|
25
25
|
*/
|
|
26
26
|
import React from "react";
|
|
27
27
|
/**
|
|
28
|
-
*
|
|
28
|
+
* The leaf component without props that renders the current actor view.
|
|
29
29
|
*
|
|
30
|
-
*
|
|
31
|
-
* context
|
|
30
|
+
* It reads the current PlaySpec, the handlers, and the registry from the
|
|
31
|
+
* ActorProvider context with usePlayView(). It then renders them with the Renderer
|
|
32
|
+
* of @xmachines/json-render-react.
|
|
32
33
|
*
|
|
33
34
|
* @public
|
|
34
35
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlayRenderer.d.ts","sourceRoot":"","sources":["../src/PlayRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B
|
|
1
|
+
{"version":3,"file":"PlayRenderer.d.ts","sourceRoot":"","sources":["../src/PlayRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAGxD,CAAC"}
|
package/dist/PlayRenderer.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
|
-
* PlayRenderer —
|
|
3
|
+
* PlayRenderer — the leaf component without props that renders the current actor view.
|
|
4
4
|
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* then
|
|
5
|
+
* Render it inside <ActorProvider> or <PlayUIProvider>.
|
|
6
|
+
* It reads the view spec, the handlers, and the registry from the usePlayView()
|
|
7
|
+
* context. It then gives them to the Renderer of @xmachines/json-render-react.
|
|
8
8
|
*
|
|
9
|
-
* Standard
|
|
9
|
+
* Standard use:
|
|
10
10
|
* ```tsx
|
|
11
11
|
* <PlayUIProvider actor={actor} registryResult={registryResult}>
|
|
12
12
|
* <PlayRenderer />
|
|
13
13
|
* </PlayUIProvider>
|
|
14
14
|
* ```
|
|
15
15
|
*
|
|
16
|
-
* For custom provider composition, use <ActorProvider
|
|
16
|
+
* For a custom provider composition, use the low-level <ActorProvider>:
|
|
17
17
|
* ```tsx
|
|
18
18
|
* <ActorProvider actor={actor} registryResult={registryResult}>
|
|
19
19
|
* <JSONUIProvider registry={registryResult.registry}>
|
|
@@ -28,10 +28,11 @@ import React from "react";
|
|
|
28
28
|
import { Renderer } from "@xmachines/json-render-react";
|
|
29
29
|
import { usePlayView } from "./ActorProvider.js";
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
31
|
+
* The leaf component without props that renders the current actor view.
|
|
32
32
|
*
|
|
33
|
-
*
|
|
34
|
-
* context
|
|
33
|
+
* It reads the current PlaySpec, the handlers, and the registry from the
|
|
34
|
+
* ActorProvider context with usePlayView(). It then renders them with the Renderer
|
|
35
|
+
* of @xmachines/json-render-react.
|
|
35
36
|
*
|
|
36
37
|
* @public
|
|
37
38
|
*/
|
package/dist/PlayRenderer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlayRenderer.js","sourceRoot":"","sources":["../src/PlayRenderer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD
|
|
1
|
+
{"version":3,"file":"PlayRenderer.js","sourceRoot":"","sources":["../src/PlayRenderer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAoC,GAAG,EAAE;IACjE,MAAM,IAAI,GAAG,WAAW,EAAE,CAAC;IAC3B,OAAO,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAAC;AAC/D,CAAC,CAAC"}
|
package/dist/PlayUIProvider.d.ts
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* PlayUIProvider —
|
|
2
|
+
* PlayUIProvider — the composite provider for an actor-driven UI.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
4
|
+
* It wraps ActorProvider and JSONUIProvider (from @xmachines/json-render-react).
|
|
5
|
+
* One component therefore serves the complete actor lifecycle and the complete UI
|
|
6
|
+
* rendering.
|
|
6
7
|
*
|
|
7
|
-
* Standard
|
|
8
|
+
* Standard use:
|
|
8
9
|
* ```tsx
|
|
9
10
|
* <PlayUIProvider actor={actor} registryResult={registryResult}>
|
|
10
11
|
* <PlayRenderer />
|
|
11
12
|
* </PlayUIProvider>
|
|
12
13
|
* ```
|
|
13
14
|
*
|
|
14
|
-
* For custom provider composition
|
|
15
|
+
* For a custom provider composition, use <ActorProvider> directly.
|
|
15
16
|
*
|
|
16
17
|
* @packageDocumentation
|
|
17
18
|
*/
|
|
@@ -20,18 +21,18 @@ import { type JSONUIProviderProps } from "@xmachines/json-render-react";
|
|
|
20
21
|
import { type ActorProviderProps } from "./ActorProvider.js";
|
|
21
22
|
type JSONUIForwardedProps = Pick<JSONUIProviderProps, "validationFunctions" | "navigate" | "functions">;
|
|
22
23
|
/**
|
|
23
|
-
*
|
|
24
|
+
* The props of PlayUIProvider — every ActorProvider prop, and also the props of JSONUIProvider.
|
|
24
25
|
*
|
|
25
26
|
* @public
|
|
26
27
|
*/
|
|
27
28
|
export interface PlayUIProviderProps extends ActorProviderProps, Partial<JSONUIForwardedProps> {
|
|
28
29
|
}
|
|
29
30
|
/**
|
|
30
|
-
* PlayUIProvider —
|
|
31
|
+
* PlayUIProvider — the standard entry point for an actor-driven UI.
|
|
31
32
|
*
|
|
32
|
-
*
|
|
33
|
-
* (JSONUIProvider
|
|
34
|
-
* StateProvider, and ConfirmDialogManager).
|
|
33
|
+
* It joins the actor lifecycle (ActorProvider) with the complete UI provider setup
|
|
34
|
+
* (JSONUIProvider, which holds ActionProvider, ValidationProvider,
|
|
35
|
+
* VisibilityProvider, StateProvider, and ConfirmDialogManager).
|
|
35
36
|
*
|
|
36
37
|
* @example
|
|
37
38
|
* ```tsx
|
|
@@ -49,7 +50,7 @@ export interface PlayUIProviderProps extends ActorProviderProps, Partial<JSONUIF
|
|
|
49
50
|
* <PlayRenderer />
|
|
50
51
|
* </PlayUIProvider>
|
|
51
52
|
*
|
|
52
|
-
* // With
|
|
53
|
+
* // With the options of JSONUIProvider:
|
|
53
54
|
* <PlayUIProvider
|
|
54
55
|
* actor={actor}
|
|
55
56
|
* registryResult={registryResult}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlayUIProvider.d.ts","sourceRoot":"","sources":["../src/PlayUIProvider.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"PlayUIProvider.d.ts","sourceRoot":"","sources":["../src/PlayUIProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxF,OAAO,EAA8B,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGzF,KAAK,oBAAoB,GAAG,IAAI,CAC/B,mBAAmB,EACnB,qBAAqB,GAAG,UAAU,GAAG,WAAW,CAChD,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB,EAAE,OAAO,CAAC,oBAAoB,CAAC;CAAG;AAmCjG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiBxD,CAAC"}
|
package/dist/PlayUIProvider.js
CHANGED
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
|
-
* PlayUIProvider —
|
|
3
|
+
* PlayUIProvider — the composite provider for an actor-driven UI.
|
|
4
4
|
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
5
|
+
* It wraps ActorProvider and JSONUIProvider (from @xmachines/json-render-react).
|
|
6
|
+
* One component therefore serves the complete actor lifecycle and the complete UI
|
|
7
|
+
* rendering.
|
|
7
8
|
*
|
|
8
|
-
* Standard
|
|
9
|
+
* Standard use:
|
|
9
10
|
* ```tsx
|
|
10
11
|
* <PlayUIProvider actor={actor} registryResult={registryResult}>
|
|
11
12
|
* <PlayRenderer />
|
|
12
13
|
* </PlayUIProvider>
|
|
13
14
|
* ```
|
|
14
15
|
*
|
|
15
|
-
* For custom provider composition
|
|
16
|
+
* For a custom provider composition, use <ActorProvider> directly.
|
|
16
17
|
*
|
|
17
18
|
* @packageDocumentation
|
|
18
19
|
*/
|
|
@@ -20,23 +21,26 @@ import React from "react";
|
|
|
20
21
|
import { JSONUIProvider } from "@xmachines/json-render-react";
|
|
21
22
|
import { ActorProvider, usePlayView } from "./ActorProvider.js";
|
|
22
23
|
/**
|
|
23
|
-
*
|
|
24
|
-
* registry, and store,
|
|
25
|
-
*
|
|
26
|
-
*
|
|
24
|
+
* The inner bridge component reads ViewContext with usePlayView. It gets the
|
|
25
|
+
* resolved handlers, the registry, and the store, and it gives them to
|
|
26
|
+
* JSONUIProvider. It gives the store explicitly, so that the internal
|
|
27
|
+
* StateProvider of JSONUIProvider uses the same store as ActorProvider. Without
|
|
28
|
+
* this store, JSONUIProvider makes a new empty store, and that store hides the
|
|
29
|
+
* store with the seeded values.
|
|
27
30
|
*
|
|
28
|
-
*
|
|
31
|
+
* Put this component inside the tree of ActorProvider, so that usePlayView() can
|
|
32
|
+
* read the ViewContextValue.
|
|
29
33
|
*/
|
|
30
34
|
function JSONUIBridge({ validationFunctions, navigate, functions, children, }) {
|
|
31
35
|
const view = usePlayView();
|
|
32
36
|
return (_jsx(JSONUIProvider, { registry: view.registry, handlers: view.handlers, store: view.store, ...(validationFunctions && { validationFunctions }), ...(navigate && { navigate }), ...(functions && { functions }), children: children }));
|
|
33
37
|
}
|
|
34
38
|
/**
|
|
35
|
-
* PlayUIProvider —
|
|
39
|
+
* PlayUIProvider — the standard entry point for an actor-driven UI.
|
|
36
40
|
*
|
|
37
|
-
*
|
|
38
|
-
* (JSONUIProvider
|
|
39
|
-
* StateProvider, and ConfirmDialogManager).
|
|
41
|
+
* It joins the actor lifecycle (ActorProvider) with the complete UI provider setup
|
|
42
|
+
* (JSONUIProvider, which holds ActionProvider, ValidationProvider,
|
|
43
|
+
* VisibilityProvider, StateProvider, and ConfirmDialogManager).
|
|
40
44
|
*
|
|
41
45
|
* @example
|
|
42
46
|
* ```tsx
|
|
@@ -54,7 +58,7 @@ function JSONUIBridge({ validationFunctions, navigate, functions, children, }) {
|
|
|
54
58
|
* <PlayRenderer />
|
|
55
59
|
* </PlayUIProvider>
|
|
56
60
|
*
|
|
57
|
-
* // With
|
|
61
|
+
* // With the options of JSONUIProvider:
|
|
58
62
|
* <PlayUIProvider
|
|
59
63
|
* actor={actor}
|
|
60
64
|
* registryResult={registryResult}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlayUIProvider.js","sourceRoot":"","sources":["../src/PlayUIProvider.tsx"],"names":[],"mappings":";AAAA
|
|
1
|
+
{"version":3,"file":"PlayUIProvider.js","sourceRoot":"","sources":["../src/PlayUIProvider.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAA4B,MAAM,8BAA8B,CAAC;AACxF,OAAO,EAAE,aAAa,EAAE,WAAW,EAA2B,MAAM,oBAAoB,CAAC;AAezF;;;;;;;;;;GAUG;AACH,SAAS,YAAY,CAAC,EACrB,mBAAmB,EACnB,QAAQ,EACR,SAAS,EACT,QAAQ,GACuD;IAC/D,MAAM,IAAI,GAAG,WAAW,EAAE,CAAC;IAE3B,OAAO,CACN,KAAC,cAAc,IACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,KACb,CAAC,mBAAmB,IAAI,EAAE,mBAAmB,EAAE,CAAC,KAChD,CAAC,QAAQ,IAAI,EAAE,QAAQ,EAAE,CAAC,KAC1B,CAAC,SAAS,IAAI,EAAE,SAAS,EAAE,CAAC,YAE/B,QAAQ,GACO,CACjB,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC7D,mBAAmB,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,UAAU,EACb,EAAE,EAAE;IACJ,OAAO,CACN,KAAC,aAAa,OAAK,UAAU,YAC5B,KAAC,YAAY,OACR,CAAC,mBAAmB,IAAI,EAAE,mBAAmB,EAAE,CAAC,KAChD,CAAC,QAAQ,IAAI,EAAE,QAAQ,EAAE,CAAC,KAC1B,CAAC,SAAS,IAAI,EAAE,SAAS,EAAE,CAAC,YAE/B,UAAU,CAAC,QAAQ,GACN,GACA,CAChB,CAAC;AACH,CAAC,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,33 +1,32 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @xmachines/play-react - React renderer for XMachines Play architecture
|
|
2
|
+
* @xmachines/play-react - React renderer for the XMachines Play architecture
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
* and renders UI components
|
|
6
|
-
*
|
|
7
|
-
* that subscribes to signal
|
|
4
|
+
* This package is the React rendering layer, and it works through providers. It
|
|
5
|
+
* observes the actor signals and renders the UI components with
|
|
6
|
+
* @xmachines/json-render-react. The architecture can therefore change the
|
|
7
|
+
* framework, because React is only a render target that subscribes to the signal
|
|
8
|
+
* changes.
|
|
8
9
|
*
|
|
9
|
-
* **Key principle:** React state is NEVER
|
|
10
|
-
*
|
|
10
|
+
* **Key principle:** React state is NEVER the place for the business logic. It only
|
|
11
|
+
* triggers the render cycle of React. The signals are the source of truth.
|
|
11
12
|
*
|
|
12
|
-
* **Standard
|
|
13
|
+
* **Standard use:**
|
|
13
14
|
* ```tsx
|
|
14
15
|
* <PlayUIProvider actor={actor} registryResult={registryResult}>
|
|
15
16
|
* <PlayRenderer />
|
|
16
17
|
* </PlayUIProvider>
|
|
17
18
|
* ```
|
|
18
19
|
*
|
|
19
|
-
* **
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
* </JSONUIProvider>
|
|
25
|
-
* </ActorProvider>
|
|
26
|
-
* ```
|
|
20
|
+
* **The escape hatch (a custom composition):** use `<ActorProvider>` directly, and give
|
|
21
|
+
* the ViewContext values (`registry`, `handlers`, `store` from `usePlayView()`) to
|
|
22
|
+
* `<JSONUIProvider>` through an inner bridge component. If you give only `registry`, you
|
|
23
|
+
* lose the action handlers and you make a new store. `PlayUIProvider` is this exact
|
|
24
|
+
* composition. Read its source for the reference bridge.
|
|
27
25
|
*
|
|
28
26
|
* @packageDocumentation
|
|
29
27
|
* @module @xmachines/play-react
|
|
30
28
|
*/
|
|
29
|
+
import type { ActorProviderProps } from "./ActorProvider.js";
|
|
31
30
|
export { PlayRenderer } from "./PlayRenderer.js";
|
|
32
31
|
export { ActorProvider } from "./ActorProvider.js";
|
|
33
32
|
export type { ActorProviderProps, ViewContextValue } from "./ActorProvider.js";
|
|
@@ -40,7 +39,10 @@ export { useActor } from "./useActor.js";
|
|
|
40
39
|
export type { AnyPlayActor } from "./useActor.js";
|
|
41
40
|
export { defineRegistry, useBoundProp, useFieldValidation, JSONUIProvider, StateProvider, ActionProvider, VisibilityProvider, ValidationProvider, Renderer, } from "@xmachines/json-render-react";
|
|
42
41
|
export type { ComponentFn, ComponentContext, JSONUIProviderProps, StateProviderProps, ActionProviderProps, VisibilityProviderProps, ValidationProviderProps, RendererProps, } from "@xmachines/json-render-react";
|
|
43
|
-
|
|
42
|
+
/**
|
|
43
|
+
* @deprecated Use {@link ActorProviderProps}. Will be removed in the next major.
|
|
44
|
+
*/
|
|
45
|
+
export type PlayRendererProps = ActorProviderProps;
|
|
44
46
|
export type { RenderErrorHandler } from "./types.js";
|
|
45
47
|
export type { PlayErrorBoundaryProps, PlayErrorBoundaryState } from "./PlayErrorBoundary.js";
|
|
46
48
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGlD,OAAO,EACN,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,QAAQ,GACR,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACX,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,aAAa,GACb,MAAM,8BAA8B,CAAC;AAGtC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACrD,YAAY,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,34 +1,32 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @xmachines/play-react - React renderer for XMachines Play architecture
|
|
2
|
+
* @xmachines/play-react - React renderer for the XMachines Play architecture
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
* and renders UI components
|
|
6
|
-
*
|
|
7
|
-
* that subscribes to signal
|
|
4
|
+
* This package is the React rendering layer, and it works through providers. It
|
|
5
|
+
* observes the actor signals and renders the UI components with
|
|
6
|
+
* @xmachines/json-render-react. The architecture can therefore change the
|
|
7
|
+
* framework, because React is only a render target that subscribes to the signal
|
|
8
|
+
* changes.
|
|
8
9
|
*
|
|
9
|
-
* **Key principle:** React state is NEVER
|
|
10
|
-
*
|
|
10
|
+
* **Key principle:** React state is NEVER the place for the business logic. It only
|
|
11
|
+
* triggers the render cycle of React. The signals are the source of truth.
|
|
11
12
|
*
|
|
12
|
-
* **Standard
|
|
13
|
+
* **Standard use:**
|
|
13
14
|
* ```tsx
|
|
14
15
|
* <PlayUIProvider actor={actor} registryResult={registryResult}>
|
|
15
16
|
* <PlayRenderer />
|
|
16
17
|
* </PlayUIProvider>
|
|
17
18
|
* ```
|
|
18
19
|
*
|
|
19
|
-
* **
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
* </JSONUIProvider>
|
|
25
|
-
* </ActorProvider>
|
|
26
|
-
* ```
|
|
20
|
+
* **The escape hatch (a custom composition):** use `<ActorProvider>` directly, and give
|
|
21
|
+
* the ViewContext values (`registry`, `handlers`, `store` from `usePlayView()`) to
|
|
22
|
+
* `<JSONUIProvider>` through an inner bridge component. If you give only `registry`, you
|
|
23
|
+
* lose the action handlers and you make a new store. `PlayUIProvider` is this exact
|
|
24
|
+
* composition. Read its source for the reference bridge.
|
|
27
25
|
*
|
|
28
26
|
* @packageDocumentation
|
|
29
27
|
* @module @xmachines/play-react
|
|
30
28
|
*/
|
|
31
|
-
//
|
|
29
|
+
// The main exports
|
|
32
30
|
export { PlayRenderer } from "./PlayRenderer.js";
|
|
33
31
|
export { ActorProvider } from "./ActorProvider.js";
|
|
34
32
|
export { usePlayView } from "./ActorProvider.js";
|
|
@@ -36,6 +34,6 @@ export { PlayUIProvider } from "./PlayUIProvider.js";
|
|
|
36
34
|
export { useSignalEffect } from "./useSignalEffect.js";
|
|
37
35
|
export { PlayErrorBoundary } from "./PlayErrorBoundary.js";
|
|
38
36
|
export { useActor } from "./useActor.js";
|
|
39
|
-
//
|
|
37
|
+
// The re-exports of @xmachines/json-render-react (D-14)
|
|
40
38
|
export { defineRegistry, useBoundProp, useFieldValidation, JSONUIProvider, StateProvider, ActionProvider, VisibilityProvider, ValidationProvider, Renderer, } from "@xmachines/json-render-react";
|
|
41
39
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAIH,mBAAmB;AACnB,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,wDAAwD;AACxD,OAAO,EACN,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,QAAQ,GACR,MAAM,8BAA8B,CAAC"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* TypeScript type definitions
|
|
2
|
+
* The TypeScript type definitions of play-react
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
* See ActorProvider.tsx and PlayUIProvider.tsx.
|
|
4
|
+
* This package removed PlayRendererProps. Use ActorProviderProps or
|
|
5
|
+
* PlayUIProviderProps. See ActorProvider.tsx and PlayUIProvider.tsx.
|
|
6
6
|
*
|
|
7
7
|
* @packageDocumentation
|
|
8
8
|
*/
|
package/dist/types.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* TypeScript type definitions
|
|
2
|
+
* The TypeScript type definitions of play-react
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
* See ActorProvider.tsx and PlayUIProvider.tsx.
|
|
4
|
+
* This package removed PlayRendererProps. Use ActorProviderProps or
|
|
5
|
+
* PlayUIProviderProps. See ActorProvider.tsx and PlayUIProvider.tsx.
|
|
6
6
|
*
|
|
7
7
|
* @packageDocumentation
|
|
8
8
|
*/
|
package/dist/useActor.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* useActor — React hook
|
|
2
|
+
* useActor — the React hook that gives the raw actor inside a PlayRenderer tree.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
4
|
+
* A component inside PlayRenderer calls useActor() to get the actor instance
|
|
5
|
+
* directly. The actor is then not necessary as a prop.
|
|
6
6
|
*
|
|
7
|
-
* @throws {NonNullableError}
|
|
7
|
+
* @throws {NonNullableError} When the caller is outside an ActorProvider or PlayUIProvider tree
|
|
8
8
|
*
|
|
9
9
|
* @example
|
|
10
10
|
* ```typescript
|
|
@@ -20,7 +20,9 @@
|
|
|
20
20
|
*/
|
|
21
21
|
import type { AbstractActor } from "@xmachines/play-actor";
|
|
22
22
|
import type { AnyActorLogic } from "xstate";
|
|
23
|
-
/**
|
|
23
|
+
/**
|
|
24
|
+
* The bare actor type that the React context providers accept. For the complete routing and view shape, use `PlayActor` from `@xmachines/play-router`.
|
|
25
|
+
*/
|
|
24
26
|
export type AnyPlayActor = AbstractActor<AnyActorLogic>;
|
|
25
27
|
export declare const ActorContext: import("react").Context<AnyPlayActor | null>;
|
|
26
28
|
export declare function useActor(): AnyPlayActor;
|
package/dist/useActor.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useActor.d.ts","sourceRoot":"","sources":["../src/useActor.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C
|
|
1
|
+
{"version":3,"file":"useActor.d.ts","sourceRoot":"","sources":["../src/useActor.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;AAExD,eAAO,MAAM,YAAY,8CAA2C,CAAC;AAErE,wBAAgB,QAAQ,IAAI,YAAY,CAEvC"}
|
package/dist/useActor.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* useActor — React hook
|
|
2
|
+
* useActor — the React hook that gives the raw actor inside a PlayRenderer tree.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
4
|
+
* A component inside PlayRenderer calls useActor() to get the actor instance
|
|
5
|
+
* directly. The actor is then not necessary as a prop.
|
|
6
6
|
*
|
|
7
|
-
* @throws {NonNullableError}
|
|
7
|
+
* @throws {NonNullableError} When the caller is outside an ActorProvider or PlayUIProvider tree
|
|
8
8
|
*
|
|
9
9
|
* @example
|
|
10
10
|
* ```typescript
|
package/dist/useActor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useActor.js","sourceRoot":"","sources":["../src/useActor.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"useActor.js","sourceRoot":"","sources":["../src/useActor.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AASpD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAsB,IAAI,CAAC,CAAC;AAErE,MAAM,UAAU,QAAQ;IACvB,OAAO,iBAAiB,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,cAAc,CAAC,CAAC;AACpE,CAAC"}
|