@xmachines/play-solid 1.0.0-beta.33 → 1.0.0-beta.34
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 +107 -35
- package/dist/ActorProvider.js +91 -0
- package/dist/ActorProvider.js.map +1 -0
- package/dist/PlayRenderer.js +11 -72
- package/dist/PlayRenderer.js.map +1 -1
- package/dist/PlayUIProvider.js +35 -0
- package/dist/PlayUIProvider.js.map +1 -0
- package/dist/index.js +6 -4
- package/dist/node_modules/@json-render/core/dist/index.js +142 -49
- package/dist/node_modules/@json-render/core/dist/index.js.map +1 -1
- package/dist/node_modules/@json-render/solid/dist/index.js +310 -107
- package/dist/node_modules/@json-render/solid/dist/index.js.map +1 -1
- package/dist/useActor.js +4 -5
- package/dist/useActor.js.map +1 -1
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -39,7 +39,12 @@ without muting console output.
|
|
|
39
39
|
- `useBoundProp` — re-exported from `@json-render/solid`
|
|
40
40
|
- `ComponentFn` (type) — re-exported from `@json-render/solid`
|
|
41
41
|
- `ComponentContext` (type) — re-exported from `@json-render/solid`
|
|
42
|
-
- `
|
|
42
|
+
- `ActorProvider` — escape hatch primitive (owns actor bridging, signal bridge, store lifecycle)
|
|
43
|
+
- `PlayUIProvider` — batteries-included composite (wraps `ActorProvider` + `JSONUIProvider`)
|
|
44
|
+
- `usePlayView` — hook for accessing the current view spec inside a provider tree
|
|
45
|
+
- `RenderErrorHandler` (type) — inner per-element error callback signature
|
|
46
|
+
- `ActorProviderProps` (type)
|
|
47
|
+
- `ViewContextValue` (type)
|
|
43
48
|
- `PlayActor` (type)
|
|
44
49
|
|
|
45
50
|
## Quick Start
|
|
@@ -119,12 +124,9 @@ const machine = setup({
|
|
|
119
124
|
meta: {
|
|
120
125
|
route: "/login",
|
|
121
126
|
view: {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
root: "
|
|
125
|
-
elements: {
|
|
126
|
-
root: { type: "Login", props: { title: "Sign In" }, children: [] },
|
|
127
|
-
},
|
|
127
|
+
root: "root",
|
|
128
|
+
elements: {
|
|
129
|
+
root: { type: "Login", props: { title: "Sign In" }, children: [] },
|
|
128
130
|
},
|
|
129
131
|
},
|
|
130
132
|
},
|
|
@@ -134,12 +136,9 @@ const machine = setup({
|
|
|
134
136
|
meta: {
|
|
135
137
|
route: "/dashboard",
|
|
136
138
|
view: {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
root: "
|
|
140
|
-
elements: {
|
|
141
|
-
root: { type: "Dashboard", props: { username: "" }, children: [] },
|
|
142
|
-
},
|
|
139
|
+
root: "root",
|
|
140
|
+
elements: {
|
|
141
|
+
root: { type: "Dashboard", props: { username: "" }, children: [] },
|
|
143
142
|
},
|
|
144
143
|
},
|
|
145
144
|
},
|
|
@@ -166,32 +165,37 @@ const actor = createPlayer();
|
|
|
166
165
|
actor.start();
|
|
167
166
|
|
|
168
167
|
function App() {
|
|
169
|
-
return
|
|
168
|
+
return (
|
|
169
|
+
<PlayUIProvider actor={actor} registryResult={registryResult}>
|
|
170
|
+
<PlayRenderer />
|
|
171
|
+
</PlayUIProvider>
|
|
172
|
+
);
|
|
170
173
|
}
|
|
171
174
|
```
|
|
172
175
|
|
|
173
176
|
## API Reference
|
|
174
177
|
|
|
175
|
-
### `
|
|
178
|
+
### `PlayUIProvider`
|
|
176
179
|
|
|
177
|
-
|
|
180
|
+
Batteries-included composite provider. Wraps `ActorProvider` + `JSONUIProvider`. Pass `actor` and `registryResult` here, then place `<PlayRenderer />` inside as a zero-prop child.
|
|
178
181
|
|
|
179
182
|
```tsx
|
|
180
|
-
<
|
|
183
|
+
<PlayUIProvider
|
|
181
184
|
actor={actor}
|
|
182
185
|
registryResult={registryResult}
|
|
183
186
|
store={myStore}
|
|
184
187
|
fallback={<p>Loading…</p>}
|
|
185
|
-
|
|
188
|
+
onError={(err) => Sentry.captureException(err)}
|
|
189
|
+
onRenderError={(error, elementType) => console.warn(`<${elementType}> crashed:`, error)}
|
|
190
|
+
>
|
|
191
|
+
<PlayRenderer />
|
|
192
|
+
</PlayUIProvider>
|
|
186
193
|
```
|
|
187
194
|
|
|
188
195
|
**`actor`** — A `PlayerActor` (or any `AbstractActor & Viewable`). Provides the `currentView` signal.
|
|
189
196
|
|
|
190
197
|
**`registryResult`** — The full `DefineRegistryResult` returned by `defineRegistry(catalog, { components, actions })` from `@xmachines/play-solid`.
|
|
191
198
|
|
|
192
|
-
`defineRegistry` also accepts `onRenderError(error, elementType)`, which receives errors
|
|
193
|
-
caught by `@json-render/solid`'s inner element boundary before the default logger is used.
|
|
194
|
-
|
|
195
199
|
**`store`** (optional) — Controls per-view UI state (`$state` bindings, form values):
|
|
196
200
|
|
|
197
201
|
- **Omitted (uncontrolled, default):** A fresh `@xstate/store` atom is created per view transition, seeded from `view.spec.state`.
|
|
@@ -204,31 +208,99 @@ import type { StateStore } from "@json-render/core";
|
|
|
204
208
|
|
|
205
209
|
const store: StateStore = xstateStoreStateStore({ atom: createAtom({ username: "" }) });
|
|
206
210
|
|
|
207
|
-
<
|
|
211
|
+
<PlayUIProvider actor={actor} registryResult={registryResult} store={store}>
|
|
212
|
+
<PlayRenderer />
|
|
213
|
+
</PlayUIProvider>;
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
**`fallback`** — Shown when `actor.currentView.get()` is `null`.
|
|
217
|
+
|
|
218
|
+
**`onError`** — Called when the outer `ErrorBoundary` catches an error. Receives `(error: unknown)`. Use for observability tools.
|
|
219
|
+
|
|
220
|
+
**`onRenderError`** — Called when an individual catalog component throws during render. Caught by `@json-render/solid`'s inner per-element `ErrorBoundary` — the failed component is silently removed while the rest of the spec continues rendering. `onError` / `fallback` are **not** triggered. When both `onRenderError` on `PlayUIProvider` and on `defineRegistry` are set, the prop wins.
|
|
221
|
+
|
|
222
|
+
---
|
|
223
|
+
|
|
224
|
+
### `ActorProvider`
|
|
225
|
+
|
|
226
|
+
Escape hatch primitive. Owns actor bridging, signal bridge, and store lifecycle. Use this when you need direct control over the provider layer.
|
|
227
|
+
|
|
228
|
+
```tsx
|
|
229
|
+
import { ActorProvider } from "@xmachines/play-solid";
|
|
230
|
+
|
|
231
|
+
<ActorProvider
|
|
232
|
+
actor={actor}
|
|
233
|
+
registryResult={registryResult}
|
|
234
|
+
onRenderError={(err, type) => reportError(err, type)}
|
|
235
|
+
>
|
|
236
|
+
{/* your own JSONUIProvider + PlayRenderer tree */}
|
|
237
|
+
</ActorProvider>;
|
|
208
238
|
```
|
|
209
239
|
|
|
210
|
-
|
|
211
|
-
|
|
240
|
+
---
|
|
241
|
+
|
|
242
|
+
### `PlayRenderer`
|
|
243
|
+
|
|
244
|
+
Zero-prop leaf component. Must be rendered inside a `PlayUIProvider` (or `ActorProvider`) tree. Subscribes to `actor.currentView` via context and renders the current spec.
|
|
212
245
|
|
|
213
246
|
```tsx
|
|
247
|
+
<PlayUIProvider actor={actor} registryResult={registryResult}>
|
|
248
|
+
<PlayRenderer />
|
|
249
|
+
</PlayUIProvider>
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
`PlayRenderer` accepts no props — all configuration (`actor`, `registryResult`, `store`, `fallback`, `onError`, `onRenderError`) is provided by the enclosing `PlayUIProvider` or `ActorProvider`.
|
|
253
|
+
|
|
254
|
+
## Error handling
|
|
255
|
+
|
|
256
|
+
The provider tree has two layers of error boundaries:
|
|
257
|
+
|
|
258
|
+
### Outer boundary — `onError` and `fallback`
|
|
259
|
+
|
|
260
|
+
Wraps the entire renderer via a SolidJS `ErrorBoundary`. Triggered when the spec or store setup throws, or when the inner boundary is not present.
|
|
261
|
+
|
|
262
|
+
```tsx
|
|
263
|
+
<PlayUIProvider
|
|
264
|
+
actor={actor}
|
|
265
|
+
registryResult={registryResult}
|
|
266
|
+
fallback={<p>Something went wrong.</p>}
|
|
267
|
+
onError={(err) => Sentry.captureException(err)}
|
|
268
|
+
>
|
|
269
|
+
<PlayRenderer />
|
|
270
|
+
</PlayUIProvider>
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
### Inner boundary — `onRenderError`
|
|
274
|
+
|
|
275
|
+
Each catalog element is individually wrapped in a SolidJS `ErrorBoundary` by `@json-render/solid`. When a component throws, it is silently removed while the rest of the spec continues rendering. The outer boundary is **not** triggered.
|
|
276
|
+
|
|
277
|
+
Pass `onRenderError` to `PlayUIProvider` (or `ActorProvider`) — overrides any registry-level handler — or bake it into `defineRegistry`:
|
|
278
|
+
|
|
279
|
+
```tsx
|
|
280
|
+
// via PlayUIProvider prop
|
|
281
|
+
<PlayUIProvider
|
|
282
|
+
actor={actor}
|
|
283
|
+
registryResult={registryResult}
|
|
284
|
+
onRenderError={(error, elementType) => {
|
|
285
|
+
console.warn(`<${elementType}> crashed:`, error);
|
|
286
|
+
}}
|
|
287
|
+
>
|
|
288
|
+
<PlayRenderer />
|
|
289
|
+
</PlayUIProvider>
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
```ts
|
|
293
|
+
// via defineRegistry — bakes the handler into the registry
|
|
214
294
|
const registryResult = defineRegistry(catalog, {
|
|
215
295
|
components: { Login, Dashboard },
|
|
216
|
-
actions: {
|
|
217
|
-
login: async (params) => {
|
|
218
|
-
if (!params) return;
|
|
219
|
-
actor.send({ type: "auth.login", username: params.username });
|
|
220
|
-
},
|
|
221
|
-
logout: async (params) => {
|
|
222
|
-
actor.send({ type: "auth.logout" });
|
|
223
|
-
},
|
|
224
|
-
},
|
|
296
|
+
actions: { login: async (params) => { ... }, logout: async () => { ... } },
|
|
225
297
|
onRenderError(error, elementType) {
|
|
226
298
|
reportExpectedRenderError(error, elementType);
|
|
227
299
|
},
|
|
228
300
|
});
|
|
229
301
|
```
|
|
230
302
|
|
|
231
|
-
|
|
303
|
+
`onRenderError` is typed as `RenderErrorHandler` and exported from `@xmachines/play-solid`.
|
|
232
304
|
|
|
233
305
|
---
|
|
234
306
|
|
|
@@ -246,7 +318,7 @@ function LogoutButton() {
|
|
|
246
318
|
}
|
|
247
319
|
```
|
|
248
320
|
|
|
249
|
-
Throws `"useActor() must be called inside <
|
|
321
|
+
Throws `NonNullableError: "useActor() must be called inside <ActorProvider> (or <PlayUIProvider>)"` if called outside the tree.
|
|
250
322
|
|
|
251
323
|
---
|
|
252
324
|
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { StateProvider as e, useStateStore as t } from "./node_modules/@json-render/solid/dist/index.js";
|
|
2
|
+
import { createAtom as n } from "./node_modules/@xstate/store/dist/store-69e7e2d5.esm.js";
|
|
3
|
+
import { xstateStoreStateStore as r } from "./node_modules/@json-render/xstate/dist/index.js";
|
|
4
|
+
import { ActorContext as i } from "./useActor.js";
|
|
5
|
+
import { createComponent as a } from "solid-js/web";
|
|
6
|
+
import { ErrorBoundary as o, createContext as s, createSignal as c, onCleanup as l, useContext as u } from "solid-js";
|
|
7
|
+
import { watchSignal as d } from "@xmachines/play-signals";
|
|
8
|
+
import { assertNonNullable as f } from "@xmachines/play";
|
|
9
|
+
//#region src/ActorProvider.tsx
|
|
10
|
+
var p = s(null);
|
|
11
|
+
function m() {
|
|
12
|
+
return f(u(p), "ViewContext");
|
|
13
|
+
}
|
|
14
|
+
var h = (e) => {
|
|
15
|
+
let n = t(), r = (e) => {
|
|
16
|
+
let t = n.getSnapshot();
|
|
17
|
+
n.update(e(t));
|
|
18
|
+
}, i = e.registryResult.handlers(() => r, () => n.getSnapshot()), o = {
|
|
19
|
+
spec: e.spec,
|
|
20
|
+
handlers: i,
|
|
21
|
+
registry: e.registryResult.registry,
|
|
22
|
+
store: e.store
|
|
23
|
+
};
|
|
24
|
+
return a(p.Provider, {
|
|
25
|
+
value: o,
|
|
26
|
+
get children() {
|
|
27
|
+
return e.children;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
}, g = (t) => {
|
|
31
|
+
let [s, u] = c(t.actor.currentView.get()), f = () => {
|
|
32
|
+
if (!t.onRenderError) return t.registryResult;
|
|
33
|
+
let e = { ...t.registryResult.registry };
|
|
34
|
+
return Object.defineProperty(e, "onRenderError", {
|
|
35
|
+
value: t.onRenderError,
|
|
36
|
+
enumerable: !1,
|
|
37
|
+
configurable: !0
|
|
38
|
+
}), {
|
|
39
|
+
...t.registryResult,
|
|
40
|
+
registry: e
|
|
41
|
+
};
|
|
42
|
+
}, p = null, m = null, g = d(t.actor.currentView, (e) => {
|
|
43
|
+
u(e);
|
|
44
|
+
});
|
|
45
|
+
return l(() => {
|
|
46
|
+
g();
|
|
47
|
+
}), a(i.Provider, {
|
|
48
|
+
get value() {
|
|
49
|
+
return t.actor;
|
|
50
|
+
},
|
|
51
|
+
get children() {
|
|
52
|
+
return a(o, {
|
|
53
|
+
fallback: (e) => (t.onError?.(e), t.fallback ?? null),
|
|
54
|
+
get children() {
|
|
55
|
+
return (() => {
|
|
56
|
+
let i = s();
|
|
57
|
+
if (!i) return t.fallback ?? null;
|
|
58
|
+
let o;
|
|
59
|
+
if (t.store) o = t.store;
|
|
60
|
+
else {
|
|
61
|
+
if (p === null || m !== i) {
|
|
62
|
+
let e = i.state;
|
|
63
|
+
p = r({ atom: n(typeof e == "object" && e && !Array.isArray(e) && Object.getPrototypeOf(e) === Object.prototype ? e : {}) }), m = i;
|
|
64
|
+
}
|
|
65
|
+
o = p;
|
|
66
|
+
}
|
|
67
|
+
return a(e, {
|
|
68
|
+
store: o,
|
|
69
|
+
get children() {
|
|
70
|
+
return a(h, {
|
|
71
|
+
get registryResult() {
|
|
72
|
+
return f();
|
|
73
|
+
},
|
|
74
|
+
spec: i,
|
|
75
|
+
store: o,
|
|
76
|
+
get children() {
|
|
77
|
+
return t.children;
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
})();
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
};
|
|
88
|
+
//#endregion
|
|
89
|
+
export { g as ActorProvider, m as usePlayView };
|
|
90
|
+
|
|
91
|
+
//# sourceMappingURL=ActorProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ActorProvider.js","names":["createSignal","onCleanup","createContext","useContext","ErrorBoundary","Component","JSX","StateProvider","useStateStore","DefineRegistryResult","SetState","StateStore","ComponentRegistry","createAtom","xstateStoreStateStore","watchSignal","assertNonNullable","PlaySpec","BaseActorProviderProps","BaseViewContextValue","ActorContext","PlayActor","ViewContextValue","ViewContext","usePlayView","ActorProviderProps","fallback","Element","onError","error","children","ActorProviderInner","registryResult","spec","store","innerProps","stateCtx","setStateAdapter","updater","prev","getSnapshot","update","handlers","viewValue","registry","_$createComponent","Provider","value","ActorProvider","props","view","setView","actor","currentView","get","resolveRegistryResult","onRenderError","r","Object","defineProperty","enumerable","configurable","internalStore","lastView","unwatch","nextView","err","rawState","state","initialState","Array","isArray","getPrototypeOf","prototype","Record","atom"],"sources":["../src/ActorProvider.tsx"],"sourcesContent":["/**\n * ActorProvider — Smart SolidJS provider component for the XMachines Play actor lifecycle.\n *\n * Escape hatch primitive for library authors who need direct control. Most users should\n * use PlayUIProvider (batteries-included composite) instead.\n *\n * This component:\n * - Subscribes to actor.currentView signal via watchSignal (in component body per Phase 29)\n * - Manages per-view StateStore lifecycle (controlled/uncontrolled)\n * - Resolves action handlers via inner component pattern (inside StateProvider)\n * - Injects onRenderError into registry if provided\n * - Provides ActorContext (actor) and ViewContext (spec + handlers + registry) to children\n * - Wraps render path in SolidJS ErrorBoundary\n *\n * Per D-11: The old `ActorProvider = ActorContext.Provider` alias is removed. This new smart\n * component takes the name. Use `ActorContext.Provider` directly for escape-hatch access.\n *\n * @packageDocumentation\n */\n\nimport { createSignal, onCleanup, createContext, useContext, ErrorBoundary } from \"solid-js\";\nimport type { Component, JSX } from \"solid-js\";\nimport { StateProvider, useStateStore } from \"@json-render/solid\";\nimport type { DefineRegistryResult, SetState } from \"@json-render/solid\";\nimport type { StateStore } from \"@json-render/core\";\nimport type { ComponentRegistry } from \"@json-render/solid\";\nimport { createAtom } from \"@xstate/store\";\nimport { xstateStoreStateStore } from \"@json-render/xstate\";\nimport { watchSignal } from \"@xmachines/play-signals\";\nimport { assertNonNullable } from \"@xmachines/play\";\nimport type { PlaySpec, BaseActorProviderProps, BaseViewContextValue } from \"@xmachines/play-actor\";\nimport { ActorContext, type PlayActor } from \"./useActor.js\";\n\n// ---------------------------------------------------------------------------\n// ViewContextValue — shape of the context value provided by ActorProvider\n// ---------------------------------------------------------------------------\n\n/**\n * Value provided by ActorProvider's ViewContext.\n * Access via usePlayView() inside the ActorProvider tree.\n */\nexport interface ViewContextValue extends BaseViewContextValue<ComponentRegistry> {}\n\nconst ViewContext = createContext<ViewContextValue | null>(null);\n\n/**\n * Hook to access the current view context inside an ActorProvider tree.\n *\n * @throws {Error} If called outside an ActorProvider (or PlayUIProvider) tree\n *\n * @example\n * ```tsx\n * import { usePlayView } from \"@xmachines/play-solid\";\n *\n * const MyRenderer: Component = () => {\n * const view = usePlayView();\n * return <Renderer spec={view.spec} registry={view.registry} />;\n * };\n * ```\n */\nexport function usePlayView(): ViewContextValue {\n\treturn assertNonNullable(useContext(ViewContext), \"ViewContext\");\n}\n\n// ---------------------------------------------------------------------------\n// ActorProviderProps\n// ---------------------------------------------------------------------------\n\n/**\n * Props for ActorProvider — the escape hatch primitive.\n *\n * For batteries-included usage, prefer PlayUIProvider which wraps ActorProvider\n * with JSONUIProvider and all required sub-providers.\n */\nexport interface ActorProviderProps extends BaseActorProviderProps<DefineRegistryResult> {\n\t/** Optional fallback element shown when currentView is null or ErrorBoundary catches */\n\tfallback?: JSX.Element;\n\n\t/** Optional callback invoked when SolidJS ErrorBoundary catches an error */\n\tonError?: (error: unknown) => void;\n\n\t/** Children — required; must include <PlayRenderer /> (or use PlayUIProvider shorthand) */\n\tchildren: JSX.Element;\n}\n\n// ---------------------------------------------------------------------------\n// ActorProviderInner — resolves handlers inside StateProvider tree\n// ---------------------------------------------------------------------------\n\n/**\n * Inner component that runs inside StateProvider so it can call useStateStore()\n * to get live set/getSnapshot for handler resolution.\n */\nconst ActorProviderInner: Component<{\n\tregistryResult: DefineRegistryResult;\n\tspec: PlaySpec;\n\tstore: StateStore;\n\tchildren: JSX.Element;\n}> = (innerProps) => {\n\tconst stateCtx = useStateStore();\n\n\t// Build SetState adapter bridging stateCtx.update/getSnapshot\n\tconst setStateAdapter: SetState = (updater) => {\n\t\tconst prev = stateCtx.getSnapshot();\n\t\tstateCtx.update(updater(prev));\n\t};\n\n\tconst handlers = innerProps.registryResult.handlers(\n\t\t() => setStateAdapter,\n\t\t() => stateCtx.getSnapshot(),\n\t);\n\n\tconst viewValue: ViewContextValue = {\n\t\tspec: innerProps.spec,\n\t\thandlers,\n\t\tregistry: innerProps.registryResult.registry,\n\t\tstore: innerProps.store,\n\t};\n\n\treturn <ViewContext.Provider value={viewValue}>{innerProps.children}</ViewContext.Provider>;\n};\n\n// ---------------------------------------------------------------------------\n// ActorProvider — the smart component (per D-11 takes the ActorProvider name)\n// ---------------------------------------------------------------------------\n\n/**\n * Smart ActorProvider component — owns actor bridging, signal subscription,\n * StateStore lifecycle, handler resolution, and error boundary.\n *\n * Per D-11: Replaces the old raw alias `ActorProvider = ActorContext.Provider`.\n * Consumers who previously used `<ActorProvider value={actor}>` should now use\n * `<ActorContext.Provider value={actor}>` for raw provider access, or migrate to\n * this smart component / PlayUIProvider.\n *\n * @example\n * ```tsx\n * import { ActorProvider, PlayRenderer } from \"@xmachines/play-solid\";\n *\n * <ActorProvider actor={myActor} registryResult={registryResult}>\n * <PlayRenderer />\n * </ActorProvider>\n * ```\n */\nexport const ActorProvider: Component<ActorProviderProps> = (props) => {\n\t// SolidJS signal for current view (PlaySpec | null)\n\tconst [view, setView] = createSignal<PlaySpec | null>(\n\t\tprops.actor.currentView.get() as PlaySpec | null,\n\t);\n\n\t// Inject onRenderError into registry if provided (non-enumerable override)\n\tconst resolveRegistryResult = () => {\n\t\tif (!props.onRenderError) return props.registryResult;\n\t\tconst r = { ...props.registryResult.registry };\n\t\tObject.defineProperty(r, \"onRenderError\", {\n\t\t\tvalue: props.onRenderError,\n\t\t\tenumerable: false,\n\t\t\tconfigurable: true,\n\t\t});\n\t\treturn { ...props.registryResult, registry: r };\n\t};\n\n\t// Per-view internal store — recreated on each view transition (uncontrolled mode)\n\tlet internalStore: StateStore | null = null;\n\tlet lastView: PlaySpec | null = null;\n\n\t// Bridge TC39 Signal to SolidJS signal — subscribe in component body (per Phase 29)\n\tconst unwatch = watchSignal(props.actor.currentView, (nextView: PlaySpec | null) => {\n\t\tsetView(nextView);\n\t});\n\tonCleanup(() => {\n\t\tunwatch();\n\t});\n\n\treturn (\n\t\t<ActorContext.Provider value={props.actor as PlayActor}>\n\t\t\t<ErrorBoundary\n\t\t\t\tfallback={(err: unknown) => {\n\t\t\t\t\tprops.onError?.(err);\n\t\t\t\t\treturn props.fallback ?? null;\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{(() => {\n\t\t\t\t\tconst currentView = view();\n\t\t\t\t\tif (!currentView) return props.fallback ?? null;\n\n\t\t\t\t\t// Resolve store: external (controlled) or internal per-view atom\n\t\t\t\t\tlet store: StateStore;\n\t\t\t\t\tif (props.store) {\n\t\t\t\t\t\tstore = props.store;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (internalStore === null || lastView !== currentView) {\n\t\t\t\t\t\t\t// Proto-safe guard: spec.state must be a plain object (T-37-05-02)\n\t\t\t\t\t\t\tconst rawState = currentView.state;\n\t\t\t\t\t\t\tconst initialState =\n\t\t\t\t\t\t\t\trawState !== null &&\n\t\t\t\t\t\t\t\ttypeof rawState === \"object\" &&\n\t\t\t\t\t\t\t\t!Array.isArray(rawState) &&\n\t\t\t\t\t\t\t\tObject.getPrototypeOf(rawState) === Object.prototype\n\t\t\t\t\t\t\t\t\t? (rawState as Record<string, unknown>)\n\t\t\t\t\t\t\t\t\t: {};\n\t\t\t\t\t\t\tinternalStore = xstateStoreStateStore({\n\t\t\t\t\t\t\t\tatom: createAtom(initialState),\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\tlastView = currentView;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tstore = internalStore;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<StateProvider store={store}>\n\t\t\t\t\t\t\t<ActorProviderInner\n\t\t\t\t\t\t\t\tregistryResult={resolveRegistryResult()}\n\t\t\t\t\t\t\t\tspec={currentView}\n\t\t\t\t\t\t\t\tstore={store}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.children}\n\t\t\t\t\t\t\t</ActorProviderInner>\n\t\t\t\t\t\t</StateProvider>\n\t\t\t\t\t);\n\t\t\t\t})()}\n\t\t\t</ErrorBoundary>\n\t\t</ActorContext.Provider>\n\t);\n};\n"],"mappings":";;;;;;;;;AA2CA,IAAMuB,IAAcrB,EAAuC,KAAK;AAiBhE,SAAgBsB,IAAgC;AAC/C,QAAOR,EAAkBb,EAAWoB,EAAY,EAAE,cAAc;;AAgCjE,IAAMQ,KAKAI,MAAe;CACpB,IAAMC,IAAW5B,GAAe,EAG1B6B,KAA6BC,MAAY;EAC9C,IAAMC,IAAOH,EAASI,aAAa;AACnCJ,IAASK,OAAOH,EAAQC,EAAK,CAAC;IAGzBG,IAAWP,EAAWH,eAAeU,eACpCL,SACAD,EAASI,aAChB,CAAC,EAEKG,IAA8B;EACnCV,MAAME,EAAWF;EACjBS;EACAE,UAAUT,EAAWH,eAAeY;EACpCV,OAAOC,EAAWD;EAClB;AAED,QAAAW,EAAQtB,EAAYuB,UAAQ;EAACC,OAAOJ;EAAS,IAAAb,WAAA;AAAA,UAAGK,EAAWL;;EAAQ,CAAA;GAyBvDkB,KAAgDC,MAAU;CAEtE,IAAM,CAACC,GAAMC,KAAWnD,EACvBiD,EAAMG,MAAMC,YAAYC,KAAK,CAC7B,EAGKC,UAA8B;AACnC,MAAI,CAACN,EAAMO,cAAe,QAAOP,EAAMjB;EACvC,IAAMyB,IAAI,EAAE,GAAGR,EAAMjB,eAAeY,UAAU;AAM9C,SALAc,OAAOC,eAAeF,GAAG,iBAAiB;GACzCV,OAAOE,EAAMO;GACbI,YAAY;GACZC,cAAc;GACd,CAAC,EACK;GAAE,GAAGZ,EAAMjB;GAAgBY,UAAUa;GAAG;IAI5CK,IAAmC,MACnCC,IAA4B,MAG1BC,IAAUjD,EAAYkC,EAAMG,MAAMC,cAAcY,MAA8B;AACnFd,IAAQc,EAAS;GAChB;AAKF,QAJAhE,QAAgB;AACf+D,KAAS;GACR,EAEFnB,EACEzB,EAAa0B,UAAQ;EAAA,IAACC,QAAK;AAAA,UAAEE,EAAMG;;EAAkB,IAAAtB,WAAA;AAAA,UAAAe,EACpDzC,GAAa;IACbsB,WAAWwC,OACVjB,EAAMrB,UAAUsC,EAAI,EACbjB,EAAMvB,YAAY;IACzB,IAAAI,WAAA;AAAA,mBAEO;MACP,IAAMuB,IAAcH,GAAM;AAC1B,UAAI,CAACG,EAAa,QAAOJ,EAAMvB,YAAY;MAG3C,IAAIQ;AACJ,UAAIe,EAAMf,MACTA,KAAQe,EAAMf;WACR;AACN,WAAI4B,MAAkB,QAAQC,MAAaV,GAAa;QAEvD,IAAMc,IAAWd,EAAYe;AAW7BL,QAHAD,IAAgBhD,EAAsB,EACrC6D,MAAM9D,EANN,OAAOsD,KAAa,YADpBA,KAEA,CAACG,MAAMC,QAAQJ,EAAS,IACxBT,OAAOc,eAAeL,EAAS,KAAKT,OAAOe,YACvCN,IACD,EAAE,CAEwB,EAC7B,CAAC,EACFJ,IAAWV;;AAEZnB,WAAQ4B;;AAGT,aAAAjB,EACEtC,GAAa;OAAQ2B;OAAK,IAAAJ,WAAA;AAAA,eAAAe,EACzBd,GAAkB;SAAA,IAClBC,iBAAc;AAAA,iBAAEuB,GAAuB;;SACvCtB,MAAMoB;SACCnB;SAAK,IAAAJ,WAAA;AAAA,iBAEXmB,EAAMnB;;SAAQ,CAAA;;OAAA,CAAA;SAIf;;IAAA,CAAA;;EAAA,CAAA"}
|
package/dist/PlayRenderer.js
CHANGED
|
@@ -1,80 +1,19 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { ActorProvider as s } from "./useActor.js";
|
|
5
|
-
import { createComponent as c } from "solid-js/web";
|
|
6
|
-
import { ErrorBoundary as l, createSignal as u, onCleanup as d } from "solid-js";
|
|
7
|
-
import { watchSignal as f } from "@xmachines/play-signals";
|
|
1
|
+
import { Renderer as e } from "./node_modules/@json-render/solid/dist/index.js";
|
|
2
|
+
import { usePlayView as t } from "./ActorProvider.js";
|
|
3
|
+
import { createComponent as n } from "solid-js/web";
|
|
8
4
|
//#region src/PlayRenderer.tsx
|
|
9
|
-
var
|
|
10
|
-
let
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
return c(e, {
|
|
15
|
-
handlers: n.registryResult.handlers(() => o, () => a.getSnapshot()),
|
|
16
|
-
get children() {
|
|
17
|
-
return c(r, { get children() {
|
|
18
|
-
return c(t, {
|
|
19
|
-
get spec() {
|
|
20
|
-
return n.spec;
|
|
21
|
-
},
|
|
22
|
-
get registry() {
|
|
23
|
-
return n.registryResult.registry;
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
} });
|
|
27
|
-
}
|
|
28
|
-
});
|
|
29
|
-
}, m = (e) => {
|
|
30
|
-
let [t, r] = u(e.actor.currentView.get()), i = () => {
|
|
31
|
-
if (!e.onRenderError) return e.registryResult;
|
|
32
|
-
let t = { ...e.registryResult.registry };
|
|
33
|
-
return Object.defineProperty(t, "onRenderError", {
|
|
34
|
-
value: e.onRenderError,
|
|
35
|
-
enumerable: !1,
|
|
36
|
-
configurable: !0
|
|
37
|
-
}), {
|
|
38
|
-
...e.registryResult,
|
|
39
|
-
registry: t
|
|
40
|
-
};
|
|
41
|
-
}, m = null, h = null, g = f(e.actor.currentView, (e) => {
|
|
42
|
-
r(e);
|
|
43
|
-
});
|
|
44
|
-
return d(() => {
|
|
45
|
-
g();
|
|
46
|
-
}), c(s, {
|
|
47
|
-
get value() {
|
|
48
|
-
return e.actor;
|
|
5
|
+
var r = () => {
|
|
6
|
+
let r = t();
|
|
7
|
+
return n(e, {
|
|
8
|
+
get spec() {
|
|
9
|
+
return r.spec;
|
|
49
10
|
},
|
|
50
|
-
get
|
|
51
|
-
return
|
|
52
|
-
fallback: (t) => (e.onError?.(t), e.fallback ?? null),
|
|
53
|
-
get children() {
|
|
54
|
-
return (() => {
|
|
55
|
-
let r = t();
|
|
56
|
-
if (!r) return e.fallback ?? null;
|
|
57
|
-
let s;
|
|
58
|
-
return e.store ? s = e.store : ((m === null || h !== r) && (m = o({ atom: a(r.spec?.state ?? {}) }), h = r), s = m), c(n, {
|
|
59
|
-
store: s,
|
|
60
|
-
get children() {
|
|
61
|
-
return c(p, {
|
|
62
|
-
get registryResult() {
|
|
63
|
-
return i();
|
|
64
|
-
},
|
|
65
|
-
get spec() {
|
|
66
|
-
return r.spec;
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
|
-
})();
|
|
72
|
-
}
|
|
73
|
-
});
|
|
11
|
+
get registry() {
|
|
12
|
+
return r.registry;
|
|
74
13
|
}
|
|
75
14
|
});
|
|
76
15
|
};
|
|
77
16
|
//#endregion
|
|
78
|
-
export {
|
|
17
|
+
export { r as PlayRenderer };
|
|
79
18
|
|
|
80
19
|
//# sourceMappingURL=PlayRenderer.js.map
|
package/dist/PlayRenderer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PlayRenderer.js","names":["
|
|
1
|
+
{"version":3,"file":"PlayRenderer.js","names":["Component","Renderer","usePlayView","PlayRenderer","view","_$createComponent","spec","registry"],"sources":["../src/PlayRenderer.tsx"],"sourcesContent":["/**\n * PlayRenderer - Zero-prop leaf component for XMachines Play SolidJS architecture.\n *\n * Reads view context from the enclosing ActorProvider (or PlayUIProvider) via\n * usePlayView() and renders the spec using @json-render/solid's Renderer.\n *\n * Standard usage:\n * ```tsx\n * <PlayUIProvider actor={myActor} registryResult={registryResult}>\n * <PlayRenderer />\n * </PlayUIProvider>\n * ```\n *\n * @packageDocumentation\n */\n\nimport type { Component } from \"solid-js\";\nimport { Renderer } from \"@json-render/solid\";\nimport { usePlayView } from \"./ActorProvider.js\";\n\n/**\n * Zero-prop leaf renderer. Must be placed inside an ActorProvider or PlayUIProvider tree.\n *\n * Reads ViewContextValue (spec, handlers, registry) from the enclosing provider\n * via usePlayView() and renders the spec via @json-render/solid's Renderer.\n */\nexport const PlayRenderer: Component = () => {\n\tconst view = usePlayView();\n\treturn <Renderer spec={view.spec} registry={view.registry} />;\n};\n"],"mappings":";;;;AA0BA,IAAaG,UAAgC;CAC5C,IAAMC,IAAOF,GAAa;AAC1B,QAAAG,EAAQJ,GAAQ;EAAA,IAACK,OAAI;AAAA,UAAEF,EAAKE;;EAAI,IAAEC,WAAQ;AAAA,UAAEH,EAAKG;;EAAQ,CAAA"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { JSONUIProvider as e } from "./node_modules/@json-render/solid/dist/index.js";
|
|
2
|
+
import { ActorProvider as t, usePlayView as n } from "./ActorProvider.js";
|
|
3
|
+
import { createComponent as r, mergeProps as i } from "solid-js/web";
|
|
4
|
+
//#region src/PlayUIProvider.tsx
|
|
5
|
+
var a = (t) => {
|
|
6
|
+
let a = n();
|
|
7
|
+
return r(e, i({
|
|
8
|
+
get registry() {
|
|
9
|
+
return a.registry;
|
|
10
|
+
},
|
|
11
|
+
get handlers() {
|
|
12
|
+
return a.handlers;
|
|
13
|
+
},
|
|
14
|
+
get store() {
|
|
15
|
+
return a.store;
|
|
16
|
+
}
|
|
17
|
+
}, () => t.validationFunctions !== void 0 && { validationFunctions: t.validationFunctions }, () => t.navigate !== void 0 && { navigate: t.navigate }, () => t.functions !== void 0 && { functions: t.functions }, { get children() {
|
|
18
|
+
return t.children;
|
|
19
|
+
} }));
|
|
20
|
+
}, o = (e) => r(t, i({
|
|
21
|
+
get actor() {
|
|
22
|
+
return e.actor;
|
|
23
|
+
},
|
|
24
|
+
get registryResult() {
|
|
25
|
+
return e.registryResult;
|
|
26
|
+
}
|
|
27
|
+
}, () => e.store !== void 0 && { store: e.store }, () => e.fallback !== void 0 && { fallback: e.fallback }, () => e.onError !== void 0 && { onError: e.onError }, () => e.onRenderError !== void 0 && { onRenderError: e.onRenderError }, { get children() {
|
|
28
|
+
return r(a, i(() => e.validationFunctions !== void 0 && { validationFunctions: e.validationFunctions }, () => e.navigate !== void 0 && { navigate: e.navigate }, () => e.functions !== void 0 && { functions: e.functions }, { get children() {
|
|
29
|
+
return e.children;
|
|
30
|
+
} }));
|
|
31
|
+
} }));
|
|
32
|
+
//#endregion
|
|
33
|
+
export { o as PlayUIProvider };
|
|
34
|
+
|
|
35
|
+
//# sourceMappingURL=PlayUIProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PlayUIProvider.js","names":["Component","JSX","JSONUIProvider","JSONUIProviderProps","ActorProvider","usePlayView","ActorProviderProps","JSONUIForwardedProps","Pick","PlayUIProviderProps","Partial","JSONUIBridge","children","Element","bridgeProps","view","_$createComponent","_$mergeProps","registry","handlers","store","validationFunctions","undefined","navigate","functions","PlayUIProvider","props","actor","registryResult","fallback","onError","onRenderError"],"sources":["../src/PlayUIProvider.tsx"],"sourcesContent":["/**\n * PlayUIProvider — Batteries-included SolidJS provider for XMachines Play.\n *\n * Wraps ActorProvider + JSONUIProvider into a single composite provider.\n * This is the recommended entry point for most users.\n *\n * Standard usage:\n * ```tsx\n * import { PlayUIProvider, PlayRenderer, defineRegistry } from \"@xmachines/play-solid\";\n *\n * const registryResult = defineRegistry(myCatalog, { components, actions });\n *\n * <PlayUIProvider actor={myActor} registryResult={registryResult}>\n * <PlayRenderer />\n * </PlayUIProvider>\n * ```\n *\n * For full control (library authors), use ActorProvider directly.\n *\n * @packageDocumentation\n */\n\nimport type { Component, JSX } from \"solid-js\";\nimport { JSONUIProvider, type JSONUIProviderProps } from \"@json-render/solid\";\nimport { ActorProvider, usePlayView, type ActorProviderProps } from \"./ActorProvider.js\";\n\n// Pick only the forwarded props from JSONUIProviderProps (per D-16)\ntype JSONUIForwardedProps = Pick<\n\tJSONUIProviderProps,\n\t\"validationFunctions\" | \"navigate\" | \"functions\"\n>;\n\n/**\n * Props for PlayUIProvider — all ActorProvider props plus JSONUIProvider's forwarded props.\n */\nexport interface PlayUIProviderProps extends ActorProviderProps, Partial<JSONUIForwardedProps> {}\n\n/**\n * Inner bridge component — must be inside ActorProvider's tree so usePlayView() has\n * access to the resolved ViewContextValue. Reads handlers and registry from the view\n * context and passes them to JSONUIProvider.\n *\n * This bridge pattern mirrors the React implementation (JSONUIBridge in play-react).\n */\nconst JSONUIBridge: Component<Partial<JSONUIForwardedProps> & { children: JSX.Element }> = (\n\tbridgeProps,\n) => {\n\tconst view = usePlayView();\n\n\treturn (\n\t\t<JSONUIProvider\n\t\t\tregistry={view.registry}\n\t\t\thandlers={view.handlers}\n\t\t\tstore={view.store}\n\t\t\t{...(bridgeProps.validationFunctions !== undefined && {\n\t\t\t\tvalidationFunctions: bridgeProps.validationFunctions,\n\t\t\t})}\n\t\t\t{...(bridgeProps.navigate !== undefined && { navigate: bridgeProps.navigate })}\n\t\t\t{...(bridgeProps.functions !== undefined && { functions: bridgeProps.functions })}\n\t\t>\n\t\t\t{bridgeProps.children}\n\t\t</JSONUIProvider>\n\t);\n};\n\n/**\n * Batteries-included composite provider: ActorProvider + JSONUIProvider.\n *\n * Provides the full JSON render context stack:\n * - ActorContext (actor instance via ActorProvider)\n * - ViewContext (spec, handlers, registry via ActorProvider)\n * - StateProvider + ActionProvider + VisibilityProvider + ValidationProvider (via JSONUIProvider)\n * - ConfirmDialogManager (via JSONUIProvider)\n *\n * @example\n * ```tsx\n * <PlayUIProvider actor={myActor} registryResult={registryResult} navigate={navigate}>\n * <PlayRenderer />\n * </PlayUIProvider>\n * ```\n */\nexport const PlayUIProvider: Component<PlayUIProviderProps> = (props) => {\n\treturn (\n\t\t<ActorProvider\n\t\t\tactor={props.actor}\n\t\t\tregistryResult={props.registryResult}\n\t\t\t{...(props.store !== undefined && { store: props.store })}\n\t\t\t{...(props.fallback !== undefined && { fallback: props.fallback })}\n\t\t\t{...(props.onError !== undefined && { onError: props.onError })}\n\t\t\t{...(props.onRenderError !== undefined && { onRenderError: props.onRenderError })}\n\t\t>\n\t\t\t<JSONUIBridge\n\t\t\t\t{...(props.validationFunctions !== undefined && {\n\t\t\t\t\tvalidationFunctions: props.validationFunctions,\n\t\t\t\t})}\n\t\t\t\t{...(props.navigate !== undefined && { navigate: props.navigate })}\n\t\t\t\t{...(props.functions !== undefined && { functions: props.functions })}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</JSONUIBridge>\n\t\t</ActorProvider>\n\t);\n};\n"],"mappings":";;;;AA4CA,IAAMW,KACLG,MACI;CACJ,IAAMC,IAAOV,GAAa;AAE1B,QAAAW,EACEd,GAAce,EAAA;EAAA,IACdC,WAAQ;AAAA,UAAEH,EAAKG;;EAAQ,IACvBC,WAAQ;AAAA,UAAEJ,EAAKI;;EAAQ,IACvBC,QAAK;AAAA,UAAEL,EAAKK;;EAAK,QACZN,EAAYO,wBAAwBC,KAAAA,KAAa,EACrDD,qBAAqBP,EAAYO,qBACjC,QACIP,EAAYS,aAAaD,KAAAA,KAAa,EAAEC,UAAUT,EAAYS,UAAU,QACxET,EAAYU,cAAcF,KAAAA,KAAa,EAAEE,WAAWV,EAAYU,WAAW,EAAA,EAAA,IAAAZ,WAAA;AAAA,SAE/EE,EAAYF;IAAQ,CAAA,CAAA;GAqBXa,KAAkDC,MAC9DV,EACEZ,GAAaa,EAAA;CAAA,IACbU,QAAK;AAAA,SAAED,EAAMC;;CAAK,IAClBC,iBAAc;AAAA,SAAEF,EAAME;;CAAc,QAC/BF,EAAMN,UAAUE,KAAAA,KAAa,EAAEF,OAAOM,EAAMN,OAAO,QACnDM,EAAMG,aAAaP,KAAAA,KAAa,EAAEO,UAAUH,EAAMG,UAAU,QAC5DH,EAAMI,YAAYR,KAAAA,KAAa,EAAEQ,SAASJ,EAAMI,SAAS,QACzDJ,EAAMK,kBAAkBT,KAAAA,KAAa,EAAES,eAAeL,EAAMK,eAAe,EAAA,EAAA,IAAAnB,WAAA;AAAA,QAAAI,EAE/EL,GAAYM,QACPS,EAAML,wBAAwBC,KAAAA,KAAa,EAC/CD,qBAAqBK,EAAML,qBAC3B,QACIK,EAAMH,aAAaD,KAAAA,KAAa,EAAEC,UAAUG,EAAMH,UAAU,QAC5DG,EAAMF,cAAcF,KAAAA,KAAa,EAAEE,WAAWE,EAAMF,WAAW,EAAA,EAAA,IAAAZ,WAAA;AAAA,SAEnEc,EAAMd;IAAQ,CAAA,CAAA;GAAA,CAAA,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useActor as
|
|
3
|
-
import {
|
|
4
|
-
|
|
1
|
+
import { ActionProvider as e, JSONUIProvider as t, Renderer as n, StateProvider as r, ValidationProvider as i, VisibilityProvider as a, defineRegistry as o, useAction as s, useActions as c, useBoundProp as l, useFieldValidation as u, useIsVisible as d, useOptionalValidation as f, useStateBinding as p, useStateStore as m, useStateValue as h, useVisibility as g } from "./node_modules/@json-render/solid/dist/index.js";
|
|
2
|
+
import { ActorContext as _, useActor as v } from "./useActor.js";
|
|
3
|
+
import { ActorProvider as y, usePlayView as b } from "./ActorProvider.js";
|
|
4
|
+
import { PlayRenderer as x } from "./PlayRenderer.js";
|
|
5
|
+
import { PlayUIProvider as S } from "./PlayUIProvider.js";
|
|
6
|
+
export { e as ActionProvider, _ as ActorContext, y as ActorProvider, t as JSONUIProvider, x as PlayRenderer, S as PlayUIProvider, n as Renderer, r as StateProvider, i as ValidationProvider, a as VisibilityProvider, o as defineRegistry, s as useAction, c as useActions, v as useActor, l as useBoundProp, u as useFieldValidation, d as useIsVisible, f as useOptionalValidation, b as usePlayView, p as useStateBinding, m as useStateStore, h as useStateValue, g as useVisibility };
|