@wirestate/react 0.6.3 → 0.7.0-experimental.2
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/CHANGELOG.md +27 -1
- package/README.md +109 -25
- package/cjs/development/index.js +462 -222
- package/cjs/development/index.js.map +1 -1
- package/cjs/development/lib.js +167 -45
- package/cjs/development/lib.js.map +1 -1
- package/cjs/development/test-utils.js +22 -11
- package/cjs/development/test-utils.js.map +1 -1
- package/cjs/production/index.js +1 -1
- package/cjs/production/index.js.map +1 -1
- package/cjs/production/lib.js +1 -1
- package/cjs/production/lib.js.map +1 -1
- package/cjs/production/test-utils.js +1 -1
- package/cjs/production/test-utils.js.map +1 -1
- package/esm/development/commands/use-command-caller.js +16 -3
- package/esm/development/commands/use-command-caller.js.map +1 -1
- package/esm/development/commands/use-command-handler.js +20 -4
- package/esm/development/commands/use-command-handler.js.map +1 -1
- package/esm/development/commands/use-optional-command-caller.js +20 -4
- package/esm/development/commands/use-optional-command-caller.js.map +1 -1
- package/esm/development/context/container-context.js +16 -0
- package/esm/development/context/container-context.js.map +1 -0
- package/esm/development/context/use-container.js +33 -0
- package/esm/development/context/use-container.js.map +1 -0
- package/esm/development/context/use-root-container.js +35 -0
- package/esm/development/context/use-root-container.js.map +1 -0
- package/esm/development/context/use-scope.js +31 -0
- package/esm/development/context/use-scope.js.map +1 -0
- package/esm/development/error/error-code.js +1 -3
- package/esm/development/error/error-code.js.map +1 -1
- package/esm/development/events/use-event-emitter.js +20 -4
- package/esm/development/events/use-event-emitter.js.map +1 -1
- package/esm/development/events/use-event.js +18 -4
- package/esm/development/events/use-event.js.map +1 -1
- package/esm/development/events/use-events-handler.js +18 -3
- package/esm/development/events/use-events-handler.js.map +1 -1
- package/esm/development/events/use-events.js +18 -4
- package/esm/development/events/use-events.js.map +1 -1
- package/esm/development/index.js +12 -10
- package/esm/development/index.js.map +1 -1
- package/esm/development/injection/use-injection.js +36 -0
- package/esm/development/injection/use-injection.js.map +1 -0
- package/esm/development/injection/use-optional-injection.js +40 -0
- package/esm/development/injection/use-optional-injection.js.map +1 -0
- package/esm/development/provision/container-activator.js +33 -0
- package/esm/development/provision/container-activator.js.map +1 -0
- package/esm/development/provision/container-provider.js +74 -0
- package/esm/development/provision/container-provider.js.map +1 -0
- package/esm/development/provision/sub-container-provider.js +69 -0
- package/esm/development/provision/sub-container-provider.js.map +1 -0
- package/esm/development/provision/use-container-provision-state.js +76 -0
- package/esm/development/provision/use-container-provision-state.js.map +1 -0
- package/esm/development/queries/use-optional-query-caller.js +16 -4
- package/esm/development/queries/use-optional-query-caller.js.map +1 -1
- package/esm/development/queries/use-optional-sync-query-caller.js +14 -3
- package/esm/development/queries/use-optional-sync-query-caller.js.map +1 -1
- package/esm/development/queries/use-query-caller.js +15 -3
- package/esm/development/queries/use-query-caller.js.map +1 -1
- package/esm/development/queries/use-query-handler.js +21 -5
- package/esm/development/queries/use-query-handler.js.map +1 -1
- package/esm/development/queries/use-sync-query-caller.js +15 -3
- package/esm/development/queries/use-sync-query-caller.js.map +1 -1
- package/esm/development/test-utils/with-container-provider.js +35 -0
- package/esm/development/test-utils/with-container-provider.js.map +1 -0
- package/esm/development/test-utils.js +1 -1
- package/esm/development/utils/shallow-equal-arrays.js +28 -0
- package/esm/development/utils/shallow-equal-arrays.js.map +1 -0
- package/esm/production/commands/use-command-caller.js +1 -1
- package/esm/production/commands/use-command-caller.js.map +1 -1
- package/esm/production/commands/use-command-handler.js +1 -1
- package/esm/production/commands/use-command-handler.js.map +1 -1
- package/esm/production/commands/use-optional-command-caller.js +1 -1
- package/esm/production/commands/use-optional-command-caller.js.map +1 -1
- package/esm/production/context/container-context.js +1 -0
- package/esm/production/context/container-context.js.map +1 -0
- package/esm/production/context/use-container.js +1 -0
- package/esm/production/context/use-container.js.map +1 -0
- package/esm/production/context/use-root-container.js +1 -0
- package/esm/production/context/use-root-container.js.map +1 -0
- package/esm/production/context/use-scope.js +1 -0
- package/esm/production/context/use-scope.js.map +1 -0
- package/esm/production/error/error-code.js +1 -1
- package/esm/production/error/error-code.js.map +1 -1
- package/esm/production/events/use-event-emitter.js +1 -1
- package/esm/production/events/use-event-emitter.js.map +1 -1
- package/esm/production/events/use-event.js +1 -1
- package/esm/production/events/use-event.js.map +1 -1
- package/esm/production/events/use-events-handler.js +1 -1
- package/esm/production/events/use-events-handler.js.map +1 -1
- package/esm/production/events/use-events.js +1 -1
- package/esm/production/events/use-events.js.map +1 -1
- package/esm/production/index.js +1 -1
- package/esm/production/injection/use-injection.js +1 -0
- package/esm/production/injection/use-injection.js.map +1 -0
- package/esm/production/injection/use-optional-injection.js +1 -0
- package/esm/production/injection/use-optional-injection.js.map +1 -0
- package/esm/production/provision/container-activator.js +1 -0
- package/esm/production/provision/container-activator.js.map +1 -0
- package/esm/production/provision/container-provider.js +1 -0
- package/esm/production/provision/container-provider.js.map +1 -0
- package/esm/production/provision/sub-container-provider.js +1 -0
- package/esm/production/provision/sub-container-provider.js.map +1 -0
- package/esm/production/provision/use-container-provision-state.js +1 -0
- package/esm/production/provision/use-container-provision-state.js.map +1 -0
- package/esm/production/queries/use-optional-query-caller.js +1 -1
- package/esm/production/queries/use-optional-query-caller.js.map +1 -1
- package/esm/production/queries/use-optional-sync-query-caller.js +1 -1
- package/esm/production/queries/use-optional-sync-query-caller.js.map +1 -1
- package/esm/production/queries/use-query-caller.js +1 -1
- package/esm/production/queries/use-query-caller.js.map +1 -1
- package/esm/production/queries/use-query-handler.js +1 -1
- package/esm/production/queries/use-query-handler.js.map +1 -1
- package/esm/production/queries/use-sync-query-caller.js +1 -1
- package/esm/production/queries/use-sync-query-caller.js.map +1 -1
- package/esm/production/test-utils/with-container-provider.js +1 -0
- package/esm/production/test-utils/with-container-provider.js.map +1 -0
- package/esm/production/test-utils.js +1 -1
- package/esm/production/utils/shallow-equal-arrays.js +1 -0
- package/esm/production/utils/shallow-equal-arrays.js.map +1 -0
- package/index.d.ts +554 -137
- package/package.json +2 -2
- package/test-utils.d.ts +19 -8
- package/esm/development/provision/create-injectables-provider.js +0 -101
- package/esm/development/provision/create-injectables-provider.js.map +0 -1
- package/esm/development/provision/ioc-context.js +0 -11
- package/esm/development/provision/ioc-context.js.map +0 -1
- package/esm/development/provision/ioc-provider.js +0 -50
- package/esm/development/provision/ioc-provider.js.map +0 -1
- package/esm/development/provision/use-container-revision.js +0 -13
- package/esm/development/provision/use-container-revision.js.map +0 -1
- package/esm/development/provision/use-container.js +0 -13
- package/esm/development/provision/use-container.js.map +0 -1
- package/esm/development/provision/use-injection.js +0 -22
- package/esm/development/provision/use-injection.js.map +0 -1
- package/esm/development/provision/use-ioc-context.js +0 -21
- package/esm/development/provision/use-ioc-context.js.map +0 -1
- package/esm/development/provision/use-optional-injection.js +0 -29
- package/esm/development/provision/use-optional-injection.js.map +0 -1
- package/esm/development/test-utils/with-ioc-provider.js +0 -24
- package/esm/development/test-utils/with-ioc-provider.js.map +0 -1
- package/esm/production/provision/create-injectables-provider.js +0 -1
- package/esm/production/provision/create-injectables-provider.js.map +0 -1
- package/esm/production/provision/ioc-context.js +0 -1
- package/esm/production/provision/ioc-context.js.map +0 -1
- package/esm/production/provision/ioc-provider.js +0 -1
- package/esm/production/provision/ioc-provider.js.map +0 -1
- package/esm/production/provision/use-container-revision.js +0 -1
- package/esm/production/provision/use-container-revision.js.map +0 -1
- package/esm/production/provision/use-container.js +0 -1
- package/esm/production/provision/use-container.js.map +0 -1
- package/esm/production/provision/use-injection.js +0 -1
- package/esm/production/provision/use-injection.js.map +0 -1
- package/esm/production/provision/use-ioc-context.js +0 -1
- package/esm/production/provision/use-ioc-context.js.map +0 -1
- package/esm/production/provision/use-optional-injection.js +0 -1
- package/esm/production/provision/use-optional-injection.js.map +0 -1
- package/esm/production/test-utils/with-ioc-provider.js +0 -1
- package/esm/production/test-utils/with-ioc-provider.js.map +0 -1
package/index.d.ts
CHANGED
|
@@ -1,254 +1,671 @@
|
|
|
1
|
-
import { CommandType, CommandDescriptor, CommandHandler,
|
|
1
|
+
import { CommandType, CommandDescriptor, CommandHandler, Container, WireScope, EventType, EventHandler, ServiceIdentifier, SeedEntries, CreateContainerOptions, QueryType, QueryHandler } from '@wirestate/core';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ReactNode, ReactElement
|
|
3
|
+
import { ReactNode, ReactElement } from 'react';
|
|
4
|
+
import { InjectableEntries } from '@wirestate/core/types/privision';
|
|
4
5
|
|
|
5
6
|
/**
|
|
6
|
-
*
|
|
7
|
+
* Represents a value that can be of type `T` or `null`.
|
|
7
8
|
*
|
|
8
|
-
* @
|
|
9
|
+
* @group general-types
|
|
10
|
+
*
|
|
11
|
+
* @template T - The base type.
|
|
9
12
|
*/
|
|
10
|
-
|
|
11
|
-
|
|
13
|
+
type Optional<T> = T | null;
|
|
12
14
|
/**
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
+
* Represents a value that can be of type `T` or a `Promise` resolving to `T`.
|
|
16
|
+
*
|
|
17
|
+
* @group general-types
|
|
15
18
|
*
|
|
16
|
-
* @
|
|
19
|
+
* @template T - The base type.
|
|
17
20
|
*/
|
|
18
|
-
|
|
21
|
+
type MaybePromise<T> = T | Promise<T>;
|
|
19
22
|
|
|
20
23
|
/**
|
|
21
|
-
*
|
|
22
|
-
* The handler is stored in a ref to avoid manual memoization.
|
|
23
|
-
* Only one handler is active per type; newer registrations shadow older ones.
|
|
24
|
+
* Represents signature for a function that dispatches commands.
|
|
24
25
|
*
|
|
25
|
-
* @
|
|
26
|
-
* @
|
|
26
|
+
* @remarks
|
|
27
|
+
* Typically returned by {@link useCommandCaller}. Dispatched commands are
|
|
28
|
+
* automatically wrapped in a {@link CommandDescriptor}.
|
|
29
|
+
*
|
|
30
|
+
* @group Commands
|
|
31
|
+
*
|
|
32
|
+
* @template R - The expected result type of the command task.
|
|
33
|
+
* @template D - The type of the data payload.
|
|
34
|
+
* @template T - The command identifier type.
|
|
35
|
+
*
|
|
36
|
+
* @param type - The command identifier.
|
|
37
|
+
* @param data - Optional payload for the command.
|
|
38
|
+
*
|
|
39
|
+
* @returns A descriptor containing the execution task and status.
|
|
27
40
|
*/
|
|
28
|
-
|
|
41
|
+
type CommandCaller = <R = unknown, D = unknown, T extends CommandType = CommandType>(type: T, data?: D) => CommandDescriptor<R>;
|
|
42
|
+
/**
|
|
43
|
+
* Represents signature for a function that dispatches optional commands.
|
|
44
|
+
*
|
|
45
|
+
* @remarks
|
|
46
|
+
* Typically returned by {@link useOptionalCommandCaller}. Returns `null` if no
|
|
47
|
+
* handler is registered for the command type, instead of throwing.
|
|
48
|
+
*
|
|
49
|
+
* @group Commands
|
|
50
|
+
*
|
|
51
|
+
* @template R - The expected result type of the command task.
|
|
52
|
+
* @template D - The type of the data payload.
|
|
53
|
+
* @template T - The command identifier type.
|
|
54
|
+
*
|
|
55
|
+
* @param type - The command identifier.
|
|
56
|
+
* @param data - Optional payload for the command.
|
|
57
|
+
*
|
|
58
|
+
* @returns A descriptor if a handler was found, or `null` otherwise.
|
|
59
|
+
*/
|
|
60
|
+
type OptionalCommandCaller = <R = unknown, D = unknown, T extends CommandType = CommandType>(type: T, data?: D) => Optional<CommandDescriptor<R>>;
|
|
29
61
|
|
|
30
|
-
|
|
31
|
-
|
|
62
|
+
/**
|
|
63
|
+
* Returns a stable function to dispatch commands on the active container.
|
|
64
|
+
*
|
|
65
|
+
* @remarks
|
|
66
|
+
* The returned dispatcher is memoized using `useCallback` and stays stable
|
|
67
|
+
* for the lifetime of the container. It uses {@link CommandBus.command} internally.
|
|
68
|
+
*
|
|
69
|
+
* @group Commands
|
|
70
|
+
*
|
|
71
|
+
* @returns A command dispatcher function that takes a type and optional data.
|
|
72
|
+
*
|
|
73
|
+
* @example
|
|
74
|
+
* ```tsx
|
|
75
|
+
* const call: CommandCaller = useCommandCaller();
|
|
76
|
+
*
|
|
77
|
+
* const onClick = () => call("SAVE_USER_COMMAND", { id: 1 });
|
|
78
|
+
* ```
|
|
79
|
+
*/
|
|
80
|
+
declare function useCommandCaller(): CommandCaller;
|
|
32
81
|
|
|
33
82
|
/**
|
|
34
|
-
*
|
|
83
|
+
* Returns a stable function to dispatch optional commands on the active container.
|
|
84
|
+
*
|
|
85
|
+
* @remarks
|
|
86
|
+
* Similar to {@link useCommandCaller}, but returns `null` instead of throwing
|
|
87
|
+
* {WirestateError} if no handler is registered for the command type.
|
|
88
|
+
* Uses {@link CommandBus.commandOptional} internally.
|
|
89
|
+
*
|
|
90
|
+
* @group Commands
|
|
91
|
+
*
|
|
92
|
+
* @returns An optional command dispatcher function.
|
|
93
|
+
*
|
|
94
|
+
* @example
|
|
95
|
+
* ```tsx
|
|
96
|
+
* const callOptional: OptionalCommandCaller = useOptionalCommandCaller();
|
|
97
|
+
* const descriptor: CommandDescriptor<string> | null = callOptional("OPTIONAL_COMMAND", data);
|
|
98
|
+
*
|
|
99
|
+
* if (descriptor) {
|
|
100
|
+
* const result: string = await descriptor.task;
|
|
101
|
+
* }
|
|
102
|
+
* ```
|
|
35
103
|
*/
|
|
36
|
-
|
|
104
|
+
declare function useOptionalCommandCaller(): OptionalCommandCaller;
|
|
105
|
+
|
|
37
106
|
/**
|
|
38
|
-
*
|
|
107
|
+
* Registers a command handler for the component's lifetime.
|
|
108
|
+
*
|
|
109
|
+
* @remarks
|
|
110
|
+
* The handler is stored in a `useRef` and synced on every render to avoid stale
|
|
111
|
+
* closures without requiring manual memoization of the handler function.
|
|
112
|
+
* Only one handler is active per type; newer registrations shadow older ones.
|
|
113
|
+
* The handler is automatically unregistered when the component unmounts.
|
|
114
|
+
*
|
|
115
|
+
* @group Commands
|
|
116
|
+
*
|
|
117
|
+
* @template R - Result type of the command.
|
|
118
|
+
* @template D - Data/payload type of the command.
|
|
119
|
+
*
|
|
120
|
+
* @param type - Command type (string or symbol).
|
|
121
|
+
* @param handler - Command handler function.
|
|
122
|
+
*
|
|
123
|
+
* @example
|
|
124
|
+
* ```tsx
|
|
125
|
+
* useCommandHandler("SAVE_COMMAND", (data) => {
|
|
126
|
+
* return api.save(data);
|
|
127
|
+
* });
|
|
128
|
+
* ```
|
|
39
129
|
*/
|
|
40
|
-
|
|
130
|
+
declare function useCommandHandler<R = unknown, D = unknown>(type: CommandType, handler: CommandHandler<D, R>): void;
|
|
131
|
+
|
|
41
132
|
/**
|
|
42
|
-
*
|
|
133
|
+
* Returns the active container from the context.
|
|
134
|
+
*
|
|
135
|
+
* @remarks
|
|
136
|
+
* Use this hook when you need direct access to the {@link Container} for manual
|
|
137
|
+
* resolution or checking bindings. For typical service usage, prefer
|
|
138
|
+
* {@link useInjection}.
|
|
139
|
+
*
|
|
140
|
+
* @group Context
|
|
141
|
+
*
|
|
142
|
+
* @returns The active container.
|
|
143
|
+
*
|
|
144
|
+
* @example
|
|
145
|
+
* ```tsx
|
|
146
|
+
* const container: Container = useContainer();
|
|
147
|
+
* const isBound: boolean = container.isBound(MyToken);
|
|
148
|
+
* ```
|
|
43
149
|
*/
|
|
44
|
-
|
|
150
|
+
declare function useContainer(): Container;
|
|
151
|
+
|
|
45
152
|
/**
|
|
46
|
-
*
|
|
153
|
+
* Creates and memoizes a root container for a component.
|
|
154
|
+
*
|
|
155
|
+
* @remarks
|
|
156
|
+
* The `factory` function re-runs only when one of `deps` changes.
|
|
157
|
+
* Between such changes, the same container instance is returned.
|
|
158
|
+
*
|
|
159
|
+
* @group Context
|
|
160
|
+
*
|
|
161
|
+
* @param factory - Lazily creates the root container.
|
|
162
|
+
* @param deps - Dependency list controlling when container is recreated.
|
|
163
|
+
* @returns The memoized root container instance.
|
|
164
|
+
*
|
|
165
|
+
* @example
|
|
166
|
+
* ```tsx
|
|
167
|
+
* const container: Container = useRootContainer(
|
|
168
|
+
* () =>
|
|
169
|
+
* createContainer({
|
|
170
|
+
* entries: [CounterService, LoggerService],
|
|
171
|
+
* }),
|
|
172
|
+
* []
|
|
173
|
+
* );
|
|
174
|
+
* ```
|
|
47
175
|
*/
|
|
48
|
-
|
|
176
|
+
declare function useRootContainer(factory: () => Container, deps: Array<unknown>): Container;
|
|
177
|
+
|
|
49
178
|
/**
|
|
50
|
-
*
|
|
179
|
+
* Returns a {@link WireScope} instance bound to the active container.
|
|
180
|
+
*
|
|
181
|
+
* @remarks
|
|
182
|
+
* The scope is recreated if the container changes. It provides a convenient
|
|
183
|
+
* way to access container features like events, commands, and queries.
|
|
184
|
+
*
|
|
185
|
+
* @group Context
|
|
186
|
+
*
|
|
187
|
+
* @returns A {@link WireScope} instance.
|
|
188
|
+
*
|
|
189
|
+
* @example
|
|
190
|
+
* ```tsx
|
|
191
|
+
* const scope: WireScope = useScope();
|
|
192
|
+
*
|
|
193
|
+
* scope.emitEvent("UI_READY");
|
|
194
|
+
* ```
|
|
51
195
|
*/
|
|
52
|
-
|
|
196
|
+
declare function useScope(): WireScope;
|
|
53
197
|
|
|
54
198
|
/**
|
|
55
|
-
*
|
|
199
|
+
* Subscribes a component to a specific event type on the {@link EventBus}.
|
|
200
|
+
*
|
|
201
|
+
* @remarks
|
|
202
|
+
* The subscription is active for the component's lifetime and is automatically
|
|
203
|
+
* cleaned up on unmount. The handler is synced via `useRef` to avoid stale
|
|
204
|
+
* closures without requiring manual memoization of the handler function.
|
|
205
|
+
*
|
|
206
|
+
* @group Events
|
|
56
207
|
*
|
|
57
|
-
* @
|
|
208
|
+
* @param type - Event type to listen for.
|
|
209
|
+
* @param handler - Function invoked when the specified event is emitted.
|
|
210
|
+
*
|
|
211
|
+
* @example
|
|
212
|
+
* ```tsx
|
|
213
|
+
* useEvent("USER_LOGGED_IN", (event) => {
|
|
214
|
+
* console.log("User logged in:,", event);
|
|
215
|
+
* });
|
|
216
|
+
* ```
|
|
58
217
|
*/
|
|
59
|
-
declare function
|
|
218
|
+
declare function useEvent(type: EventType, handler: EventHandler): void;
|
|
60
219
|
|
|
61
220
|
/**
|
|
62
|
-
*
|
|
63
|
-
* Returns null instead of throwing when no handler is registered.
|
|
221
|
+
* Subscribes a component to multiple event types on the {@link EventBus}.
|
|
64
222
|
*
|
|
65
|
-
* @
|
|
223
|
+
* @remarks
|
|
224
|
+
* Similar to {@link useEvent}, but allows listening for a collection of event
|
|
225
|
+
* types using a single handler.
|
|
226
|
+
* The handler and type list are synced via `useRef` to avoid stale closures.
|
|
227
|
+
*
|
|
228
|
+
* @group Events
|
|
229
|
+
*
|
|
230
|
+
* @param types - Array of event types (strings or symbols) to filter by.
|
|
231
|
+
* @param handler - Function invoked when any of the specified events are emitted.
|
|
232
|
+
*
|
|
233
|
+
* @example
|
|
234
|
+
* ```tsx
|
|
235
|
+
* useEvents(["USER_UPDATED", "USER_DELETED"], (event) => {
|
|
236
|
+
* refreshList();
|
|
237
|
+
* });
|
|
238
|
+
* ```
|
|
66
239
|
*/
|
|
67
|
-
declare function
|
|
240
|
+
declare function useEvents(types: ReadonlyArray<EventType>, handler: EventHandler): void;
|
|
68
241
|
|
|
69
242
|
/**
|
|
70
|
-
*
|
|
71
|
-
*
|
|
72
|
-
*
|
|
243
|
+
* Subscribes a component to all events on the {@link EventBus} without type filtering.
|
|
244
|
+
*
|
|
245
|
+
* @remarks
|
|
246
|
+
* Useful for logging, debugging, or cross-cutting concerns that need to see
|
|
247
|
+
* every event passing through the bus.
|
|
248
|
+
* The handler is synced via `useRef` to avoid stale closures.
|
|
249
|
+
* The subscription is automatically cleaned up on unmount.
|
|
250
|
+
*
|
|
251
|
+
* @group Events
|
|
73
252
|
*
|
|
74
|
-
* @param
|
|
75
|
-
*
|
|
253
|
+
* @param handler - Event handler invoked for every emitted event.
|
|
254
|
+
*
|
|
255
|
+
* @example
|
|
256
|
+
* ```tsx
|
|
257
|
+
* useEventsHandler((event) => {
|
|
258
|
+
* console.log('Event receieved:', event.type, event.payload);
|
|
259
|
+
* });
|
|
260
|
+
* ```
|
|
76
261
|
*/
|
|
77
|
-
declare function
|
|
262
|
+
declare function useEventsHandler(handler: EventHandler): void;
|
|
78
263
|
|
|
79
264
|
/**
|
|
80
|
-
*
|
|
81
|
-
*
|
|
265
|
+
* Represents signature for a function that emits events via the EventBus.
|
|
266
|
+
*
|
|
267
|
+
* @remarks
|
|
268
|
+
* Typically returned by {@link useEventEmitter}. Supports optional payload
|
|
269
|
+
* and source identifier.
|
|
270
|
+
*
|
|
271
|
+
* @group Events
|
|
82
272
|
*
|
|
83
|
-
* @
|
|
273
|
+
* @template P - The type of the event payload.
|
|
274
|
+
* @template T - The event identifier type.
|
|
275
|
+
* @template F - The type of the event source identifier.
|
|
276
|
+
*
|
|
277
|
+
* @param type - The event identifier.
|
|
278
|
+
* @param payload - Optional data associated with the event.
|
|
279
|
+
* @param from - Optional identifier of the event source.
|
|
84
280
|
*/
|
|
85
|
-
|
|
281
|
+
type EventEmitter<P = unknown, T extends EventType = EventType, F = unknown> = (type: T, payload?: P, from?: F) => void;
|
|
86
282
|
|
|
87
283
|
/**
|
|
88
|
-
* Returns a stable function to
|
|
89
|
-
*
|
|
284
|
+
* Returns a stable function to emit events via the {@link EventBus}.
|
|
285
|
+
*
|
|
286
|
+
* @remarks
|
|
287
|
+
* The returned emitter is memoized using `useCallback` and stays stable
|
|
288
|
+
* for the lifetime of the container.
|
|
289
|
+
*
|
|
290
|
+
* @group Events
|
|
291
|
+
*
|
|
292
|
+
* @template P - Default payload type for emitted events.
|
|
293
|
+
* @template T - Default event identifier type.
|
|
294
|
+
*
|
|
295
|
+
* @returns An event emitter function.
|
|
296
|
+
*
|
|
297
|
+
* @example
|
|
298
|
+
* ```tsx
|
|
299
|
+
* const emit: EventEmitter = useEventEmitter();
|
|
90
300
|
*
|
|
91
|
-
*
|
|
301
|
+
* const onClick = () => emit("BUTTON_CLICKED", { id: "submit" });
|
|
302
|
+
* ```
|
|
92
303
|
*/
|
|
93
|
-
declare function
|
|
304
|
+
declare function useEventEmitter<P = unknown, T extends EventType = EventType>(): EventEmitter<P, T>;
|
|
94
305
|
|
|
95
306
|
/**
|
|
96
|
-
* Resolves a
|
|
97
|
-
*
|
|
307
|
+
* Resolves a service or constant from the active container.
|
|
308
|
+
*
|
|
309
|
+
* @remarks
|
|
310
|
+
* This hook automatically re-resolves the dependency if the container's
|
|
311
|
+
* revision changes (e.g., due to re-binding in a provider).
|
|
312
|
+
*
|
|
313
|
+
* @group Injection
|
|
314
|
+
*
|
|
315
|
+
* @template T - The type of the value being resolved.
|
|
316
|
+
*
|
|
317
|
+
* @param injectionId - The service identifier (string, symbol, or constructor).
|
|
98
318
|
*
|
|
99
|
-
* @
|
|
100
|
-
*
|
|
319
|
+
* @returns The resolved instance or value.
|
|
320
|
+
*
|
|
321
|
+
* @throws {WirestateError} If the container is not found in context.
|
|
322
|
+
* @throws {Error} If Inversify fails to resolve the identifier.
|
|
323
|
+
*
|
|
324
|
+
* @example
|
|
325
|
+
* ```tsx
|
|
326
|
+
* const api: ApiService = useInjection(ApiService);
|
|
327
|
+
* ```
|
|
101
328
|
*/
|
|
102
329
|
declare function useInjection<T>(injectionId: ServiceIdentifier<T>): T;
|
|
103
330
|
|
|
104
331
|
/**
|
|
105
|
-
*
|
|
106
|
-
*
|
|
332
|
+
* Safely resolves a value from the container, returning a fallback or null if not bound.
|
|
333
|
+
*
|
|
334
|
+
* @remarks
|
|
335
|
+
* Unlike {@link useInjection}, this hook does not throw if the dependency
|
|
336
|
+
* is missing from the container.
|
|
337
|
+
*
|
|
338
|
+
* @group Injection
|
|
339
|
+
*
|
|
340
|
+
* @template T - The type of the value being resolved.
|
|
341
|
+
*
|
|
342
|
+
* @param injectionId - The service identifier (string, symbol, or constructor).
|
|
343
|
+
* @param onFallback - Optional function called to provide a value if the token is not bound.
|
|
344
|
+
*
|
|
345
|
+
* @returns The resolved value, the result of the fallback function, or `null`.
|
|
107
346
|
*
|
|
108
|
-
* @
|
|
109
|
-
*
|
|
110
|
-
*
|
|
347
|
+
* @example
|
|
348
|
+
* ```tsx
|
|
349
|
+
* const logger = useOptionalInjection(FileLogger, (container) => container.get(ConsoleLoggerService);
|
|
350
|
+
* ```
|
|
111
351
|
*/
|
|
112
352
|
declare function useOptionalInjection<T>(injectionId: ServiceIdentifier<T>, onFallback?: (container: Container) => T): Optional<T>;
|
|
113
353
|
|
|
114
354
|
/**
|
|
115
|
-
* Props
|
|
355
|
+
* Props accepted by {@link SubContainerProvider}.
|
|
356
|
+
*
|
|
357
|
+
* @group Provision
|
|
116
358
|
*/
|
|
117
|
-
interface
|
|
359
|
+
interface SubContainerProviderProps {
|
|
118
360
|
/**
|
|
119
|
-
* Targeted seeds
|
|
120
|
-
*
|
|
361
|
+
* Targeted seeds applied before entries are bound.
|
|
362
|
+
*
|
|
363
|
+
* @remarks
|
|
364
|
+
* Seed changes do not recreate the child container. Pass a React `key` to
|
|
365
|
+
* force a remount when you need to re-seed the subtree.
|
|
121
366
|
*/
|
|
122
367
|
readonly seeds?: SeedEntries;
|
|
123
368
|
/**
|
|
124
|
-
*
|
|
369
|
+
* Services or descriptors bound inside the child container.
|
|
370
|
+
*
|
|
371
|
+
* @remarks
|
|
372
|
+
* The child container is recreated when this array changes by shallow
|
|
373
|
+
* comparison or when the parent container changes.
|
|
125
374
|
*/
|
|
126
|
-
readonly
|
|
127
|
-
}
|
|
128
|
-
/**
|
|
129
|
-
* Component returned by {@link createInjectablesProvider}.
|
|
130
|
-
*/
|
|
131
|
-
type InjectablesProvider = ReturnType<typeof createInjectablesProvider>;
|
|
132
|
-
/**
|
|
133
|
-
* Configuration for {@link createInjectablesProvider}.
|
|
134
|
-
*/
|
|
135
|
-
interface CreateInjectablesProviderOptions {
|
|
375
|
+
readonly entries: InjectableEntries;
|
|
136
376
|
/**
|
|
137
|
-
*
|
|
377
|
+
* React subtree that receives the child container.
|
|
138
378
|
*/
|
|
139
|
-
readonly
|
|
379
|
+
readonly children?: ReactNode;
|
|
140
380
|
}
|
|
141
381
|
/**
|
|
142
|
-
*
|
|
382
|
+
* Provides a child container derived from the nearest parent container.
|
|
383
|
+
*
|
|
384
|
+
* @remarks
|
|
385
|
+
* The provider owns the child container. It disposes the previous child before
|
|
386
|
+
* exposing a replacement, recreates on parent or `entries` changes, and revives
|
|
387
|
+
* a cleaned child after React development remount cleanup.
|
|
143
388
|
*
|
|
144
|
-
* @
|
|
145
|
-
*
|
|
146
|
-
* @
|
|
389
|
+
* @group Provision
|
|
390
|
+
*
|
|
391
|
+
* @param props - Provider props.
|
|
392
|
+
* @returns A React context provider for the child container.
|
|
147
393
|
*/
|
|
148
|
-
declare function
|
|
149
|
-
(props: InjectablesProviderProps): ReactElement;
|
|
150
|
-
displayName: string;
|
|
151
|
-
};
|
|
394
|
+
declare function SubContainerProvider(props: SubContainerProviderProps): react.FunctionComponentElement<react.ProviderProps<any>>;
|
|
152
395
|
|
|
153
396
|
/**
|
|
154
|
-
*
|
|
397
|
+
* Represents props for {@link ContainerActivator}.
|
|
398
|
+
*
|
|
399
|
+
* @group Provision
|
|
155
400
|
*/
|
|
156
|
-
interface
|
|
157
|
-
/**
|
|
158
|
-
* Inversify container.
|
|
159
|
-
*/
|
|
160
|
-
readonly container: Container;
|
|
401
|
+
interface ContainerActivatorProps {
|
|
161
402
|
/**
|
|
162
|
-
*
|
|
403
|
+
* Services to resolve immediately on render.
|
|
404
|
+
*
|
|
405
|
+
* @remarks
|
|
406
|
+
* Listed services must be bound in current container.
|
|
163
407
|
*/
|
|
164
|
-
readonly
|
|
408
|
+
readonly activate: ReadonlyArray<ServiceIdentifier>;
|
|
165
409
|
/**
|
|
166
|
-
*
|
|
410
|
+
* Nested child node.
|
|
167
411
|
*/
|
|
168
|
-
readonly
|
|
412
|
+
readonly children?: ReactNode;
|
|
169
413
|
}
|
|
414
|
+
/**
|
|
415
|
+
* Resolves specified services from the current IoC container before rendering children.
|
|
416
|
+
*
|
|
417
|
+
* @remarks
|
|
418
|
+
* Activation runs once per container instance.
|
|
419
|
+
* On rerender with the same container, services are not resolved again.
|
|
420
|
+
*
|
|
421
|
+
* @group Provision
|
|
422
|
+
*
|
|
423
|
+
* @param props - Component properties.
|
|
424
|
+
* @param props.activate - Services to resolve eagerly from container.
|
|
425
|
+
* @param props.children - React children element.
|
|
426
|
+
* @returns React children after activation side effect is applied.
|
|
427
|
+
*/
|
|
428
|
+
declare function ContainerActivator(props: ContainerActivatorProps): ReactElement<any, string | react.JSXElementConstructor<any>>;
|
|
170
429
|
|
|
171
430
|
/**
|
|
172
|
-
*
|
|
431
|
+
* Describes how {@link ContainerProvider} receives its root container.
|
|
432
|
+
*
|
|
433
|
+
* @remarks
|
|
434
|
+
* Pass an existing {@link Container} when ownership lives outside React. Pass
|
|
435
|
+
* {@link CreateContainerOptions} when the provider should create and dispose a
|
|
436
|
+
* managed container for the subtree.
|
|
437
|
+
*/
|
|
438
|
+
type ContainerProviderSource = Container | CreateContainerOptions;
|
|
439
|
+
/**
|
|
440
|
+
* Represents props accepted by {@link ContainerProvider}.
|
|
441
|
+
*
|
|
442
|
+
* @group Provision
|
|
173
443
|
*/
|
|
174
|
-
interface
|
|
444
|
+
interface ContainerProviderProps {
|
|
175
445
|
/**
|
|
176
|
-
*
|
|
446
|
+
* Container instance or options used to create one.
|
|
447
|
+
*
|
|
448
|
+
* @remarks
|
|
449
|
+
* External container instances are never disposed by this provider. Managed
|
|
450
|
+
* containers created from options are disposed on unmount and recreated when
|
|
451
|
+
* the `entries` array changes by shallow comparison.
|
|
177
452
|
*/
|
|
178
|
-
readonly container
|
|
453
|
+
readonly container: ContainerProviderSource;
|
|
179
454
|
/**
|
|
180
|
-
*
|
|
455
|
+
* React subtree that receives the active container.
|
|
181
456
|
*/
|
|
182
|
-
readonly
|
|
457
|
+
readonly children?: ReactNode;
|
|
183
458
|
}
|
|
184
459
|
/**
|
|
185
|
-
* Provides
|
|
460
|
+
* Provides a root Wirestate container to a React subtree.
|
|
186
461
|
*
|
|
187
|
-
* @
|
|
188
|
-
*
|
|
189
|
-
*
|
|
190
|
-
* @
|
|
191
|
-
*
|
|
462
|
+
* @remarks
|
|
463
|
+
* The provider supports two modes:
|
|
464
|
+
*
|
|
465
|
+
* - External mode: `container` is a prebuilt {@link Container}. The provider
|
|
466
|
+
* only passes it through context.
|
|
467
|
+
* - Managed mode: `container` is {@link CreateContainerOptions}. The provider
|
|
468
|
+
* creates a container, owns its disposal, recreates it when `entries` change,
|
|
469
|
+
* and revives it after React development remount cleanup.
|
|
470
|
+
*
|
|
471
|
+
* @group Provision
|
|
472
|
+
*
|
|
473
|
+
* @param props - Provider props.
|
|
474
|
+
* @returns A React context provider for the active container.
|
|
192
475
|
*/
|
|
193
|
-
declare function
|
|
476
|
+
declare function ContainerProvider(props: ContainerProviderProps): react.FunctionComponentElement<react.ProviderProps<any>>;
|
|
194
477
|
|
|
195
478
|
/**
|
|
196
|
-
*
|
|
479
|
+
* Represents signature for a function that responds to a query.
|
|
480
|
+
*
|
|
481
|
+
* @group Queries
|
|
482
|
+
*
|
|
483
|
+
* @template R - The result type of the query.
|
|
484
|
+
* @template D - The type of the data payload.
|
|
485
|
+
*
|
|
486
|
+
* @param data - Optional payload for the query.
|
|
197
487
|
*
|
|
198
|
-
* @returns
|
|
488
|
+
* @returns The query result, possibly as a promise.
|
|
199
489
|
*/
|
|
200
|
-
|
|
201
|
-
|
|
490
|
+
type QueryResponder<R = unknown, D = unknown> = (data?: D) => MaybePromise<R>;
|
|
202
491
|
/**
|
|
203
|
-
*
|
|
492
|
+
* Represents signature for a function that dispatches queries and returns their result.
|
|
493
|
+
*
|
|
494
|
+
* @remarks
|
|
495
|
+
* Typically returned by {@link useQueryCaller}.
|
|
496
|
+
*
|
|
497
|
+
* @group Queries
|
|
498
|
+
*
|
|
499
|
+
* @template R - The result type of the query.
|
|
500
|
+
* @template D - The type of the data payload.
|
|
501
|
+
* @template T - The query identifier type.
|
|
204
502
|
*
|
|
205
|
-
* @
|
|
503
|
+
* @param type - The query identifier.
|
|
504
|
+
* @param data - Optional payload for the query.
|
|
505
|
+
*
|
|
506
|
+
* @returns The query result as a value or promise.
|
|
206
507
|
*/
|
|
207
|
-
|
|
208
|
-
|
|
508
|
+
type QueryCaller = <R = unknown, D = unknown, T extends QueryType = QueryType>(type: T, data?: D) => MaybePromise<R>;
|
|
509
|
+
/**
|
|
510
|
+
* Represents signature for a function that dispatches synchronous queries.
|
|
511
|
+
*
|
|
512
|
+
* @remarks
|
|
513
|
+
* Typically returned by {@link useSyncQueryCaller}.
|
|
514
|
+
*
|
|
515
|
+
* @group Queries
|
|
516
|
+
*
|
|
517
|
+
* @template R - The result type of the query.
|
|
518
|
+
* @template D - The type of the data payload.
|
|
519
|
+
* @template T - The query identifier type.
|
|
520
|
+
*
|
|
521
|
+
* @param type - The query identifier.
|
|
522
|
+
* @param data - Optional payload for the query.
|
|
523
|
+
*
|
|
524
|
+
* @returns The query result directly.
|
|
525
|
+
*/
|
|
526
|
+
type SyncQueryCaller = <R = unknown, D = unknown, T extends QueryType = QueryType>(type: T, data?: D) => R;
|
|
209
527
|
/**
|
|
210
|
-
*
|
|
528
|
+
* Represents signature for a function that dispatches optional queries.
|
|
529
|
+
*
|
|
530
|
+
* @remarks
|
|
531
|
+
* Typically returned by {@link useOptionalQueryCaller}. Returns `null` when
|
|
532
|
+
* no handler is registered.
|
|
533
|
+
*
|
|
534
|
+
* @group Queries
|
|
211
535
|
*
|
|
212
|
-
* @
|
|
213
|
-
* @
|
|
536
|
+
* @template R - The result type of the query.
|
|
537
|
+
* @template D - The type of the data payload.
|
|
538
|
+
* @template T - The query identifier type.
|
|
539
|
+
*
|
|
540
|
+
* @param type - The query identifier.
|
|
541
|
+
* @param data - Optional payload for the query.
|
|
542
|
+
*
|
|
543
|
+
* @returns The query result, or `null` if no handler was found.
|
|
214
544
|
*/
|
|
215
|
-
|
|
216
|
-
|
|
545
|
+
type OptionalQueryCaller = <R = unknown, D = unknown, T extends QueryType = QueryType>(type: T, data?: D) => Optional<MaybePromise<R>>;
|
|
217
546
|
/**
|
|
218
|
-
*
|
|
547
|
+
* Represents signature for a function that dispatches optional synchronous queries.
|
|
548
|
+
*
|
|
549
|
+
* @remarks
|
|
550
|
+
* Typically returned by {@link useOptionalSyncQueryCaller}. Returns `null`
|
|
551
|
+
* when no handler is registered.
|
|
219
552
|
*
|
|
220
|
-
* @
|
|
221
|
-
*
|
|
553
|
+
* @group Queries
|
|
554
|
+
*
|
|
555
|
+
* @template R - The result type of the query.
|
|
556
|
+
* @template D - The type of the data payload.
|
|
557
|
+
* @template T - The query identifier type.
|
|
558
|
+
*
|
|
559
|
+
* @param type - The query identifier.
|
|
560
|
+
* @param data - Optional payload for the query.
|
|
561
|
+
*
|
|
562
|
+
* @returns The query result directly, or `null` if no handler was found.
|
|
222
563
|
*/
|
|
223
|
-
|
|
564
|
+
type OptionalSyncQueryCaller = <R = unknown, D = unknown, T extends QueryType = QueryType>(type: T, data?: D) => Optional<R>;
|
|
224
565
|
|
|
225
566
|
/**
|
|
226
|
-
*
|
|
567
|
+
* Returns a stable function to dispatch queries on the active container.
|
|
568
|
+
*
|
|
569
|
+
* @remarks
|
|
570
|
+
* The returned dispatcher is memoized using `useCallback` and stays stable
|
|
571
|
+
* for the lifetime of the container. It uses {@link QueryBus.query} internally.
|
|
227
572
|
*
|
|
228
|
-
* @
|
|
573
|
+
* @group Queries
|
|
574
|
+
*
|
|
575
|
+
* @returns A query dispatcher function.
|
|
576
|
+
*
|
|
577
|
+
* @example
|
|
578
|
+
* ```tsx
|
|
579
|
+
* const query: QueryCaller = useQueryCaller();
|
|
580
|
+
* const result: UserProfile = await query(GET_USER_PROFILE, { id: 123 });
|
|
581
|
+
* ```
|
|
229
582
|
*/
|
|
230
|
-
declare function
|
|
583
|
+
declare function useQueryCaller(): QueryCaller;
|
|
231
584
|
|
|
232
585
|
/**
|
|
233
|
-
*
|
|
586
|
+
* Returns a stable function to dispatch optional queries on the active container.
|
|
587
|
+
*
|
|
588
|
+
* @remarks
|
|
589
|
+
* The returned dispatcher is memoized using `useCallback` and stays stable
|
|
590
|
+
* for the lifetime of the container. It returns `null` instead of throwing
|
|
591
|
+
* if no handler is registered.
|
|
592
|
+
*
|
|
593
|
+
* @group Queries
|
|
594
|
+
*
|
|
595
|
+
* @returns An optional query dispatcher function.
|
|
596
|
+
*
|
|
597
|
+
* @example
|
|
598
|
+
* ```tsx
|
|
599
|
+
* const queryOptional: OptionalQueryCaller = useOptionalQueryCaller();
|
|
600
|
+
* const settings: UserSettings | null = await queryOptional(GET_USER_SETTINGS, { id: 1 });
|
|
601
|
+
* ```
|
|
234
602
|
*/
|
|
235
|
-
|
|
603
|
+
declare function useOptionalQueryCaller(): OptionalQueryCaller;
|
|
236
604
|
|
|
237
605
|
/**
|
|
238
|
-
*
|
|
606
|
+
* Registers a query handler for the component's lifetime.
|
|
607
|
+
*
|
|
608
|
+
* @remarks
|
|
609
|
+
* The handler is stored in a `useRef` and synced on every render to avoid stale
|
|
610
|
+
* closures. Only one handler is active per type; newer registrations shadow older ones.
|
|
611
|
+
* The handler is automatically unregistered when the component unmounts.
|
|
239
612
|
*
|
|
240
|
-
* @
|
|
613
|
+
* @group Queries
|
|
614
|
+
*
|
|
615
|
+
* @template R - Result type of the query.
|
|
616
|
+
* @template D - Data/payload type of the query.
|
|
617
|
+
* @template T - Query identifier type.
|
|
618
|
+
*
|
|
619
|
+
* @param type - Query identifier (string or symbol).
|
|
620
|
+
* @param handler - Function that responds to the query.
|
|
621
|
+
*
|
|
622
|
+
* @example
|
|
623
|
+
* ```tsx
|
|
624
|
+
* useQueryHandler("GET_DATA", (data) => {
|
|
625
|
+
* return { id: data.id, value: "Resolved" };
|
|
626
|
+
* });
|
|
627
|
+
* ```
|
|
241
628
|
*/
|
|
242
|
-
declare function
|
|
629
|
+
declare function useQueryHandler<R = unknown, D = unknown, T extends QueryType = QueryType>(type: T, handler: QueryHandler<D, R>): void;
|
|
243
630
|
|
|
244
631
|
/**
|
|
245
|
-
*
|
|
632
|
+
* Returns a stable function to dispatch synchronous queries.
|
|
633
|
+
*
|
|
634
|
+
* @remarks
|
|
635
|
+
* The returned dispatcher returns the value directly from the handler
|
|
636
|
+
* instead of a Promise (unless the handler itself returns a Promise).
|
|
637
|
+
* Memoized using `useCallback`.
|
|
638
|
+
*
|
|
639
|
+
* @group Queries
|
|
640
|
+
*
|
|
641
|
+
* @returns A synchronous query dispatcher function.
|
|
642
|
+
*
|
|
643
|
+
* @example
|
|
644
|
+
* ```tsx
|
|
645
|
+
* const querySync: SyncQueryCaller = useSyncQueryCaller();
|
|
646
|
+
* const config: ApplicationConfig = querySync("GET_APP_CONFIG");
|
|
647
|
+
* ```
|
|
246
648
|
*/
|
|
247
|
-
|
|
649
|
+
declare function useSyncQueryCaller(): SyncQueryCaller;
|
|
650
|
+
|
|
248
651
|
/**
|
|
249
|
-
*
|
|
652
|
+
* Returns a stable function to dispatch synchronous optional queries.
|
|
653
|
+
*
|
|
654
|
+
* @remarks
|
|
655
|
+
* Similar to {@link useOptionalQueryCaller}, but returns the value directly
|
|
656
|
+
* (synchronously) from the handler. Returns `null` if no handler is registered.
|
|
657
|
+
*
|
|
658
|
+
* @group Queries
|
|
659
|
+
*
|
|
660
|
+
* @returns An optional synchronous query dispatcher function.
|
|
661
|
+
*
|
|
662
|
+
* @example
|
|
663
|
+
* ```tsx
|
|
664
|
+
* const querySyncOptional: OptionalSyncQueryCaller = useOptionalSyncQueryCaller();
|
|
665
|
+
* const value: ThemePreference | null = querySyncOptional(GET_THEME_PREFERENCE);
|
|
666
|
+
* ```
|
|
250
667
|
*/
|
|
251
|
-
|
|
668
|
+
declare function useOptionalSyncQueryCaller(): OptionalSyncQueryCaller;
|
|
252
669
|
|
|
253
|
-
export {
|
|
254
|
-
export type { CommandCaller,
|
|
670
|
+
export { ContainerActivator, ContainerProvider, SubContainerProvider, useCommandCaller, useCommandHandler, useContainer, useEvent, useEventEmitter, useEvents, useEventsHandler, useInjection, useOptionalCommandCaller, useOptionalInjection, useOptionalQueryCaller, useOptionalSyncQueryCaller, useQueryCaller, useQueryHandler, useRootContainer, useScope, useSyncQueryCaller };
|
|
671
|
+
export type { CommandCaller, ContainerActivatorProps, ContainerProviderProps, EventEmitter, OptionalCommandCaller, OptionalQueryCaller, OptionalSyncQueryCaller, QueryCaller, QueryResponder, SubContainerProviderProps, SyncQueryCaller };
|